<template>
  <div ref="routeInfo" class="route-container">
    <el-collapse
      value="1"
      accordion
      v-model="activeNames"
      @change="collapseChange"
      v-loading="loading"
    >
      <div
        class="collapse-item-header"
        v-for="(item, index) in routesInfo"
        :key="item.route || item.flightRoute"
      >
        <el-collapse-item :name="index" v-if="showFlightRoute(item)">
          <!-- 航线名 -->
          <template slot="title">
            <strong>{{ item.route || item.flightRoute }}</strong>
          </template>
          <!-- 航线设置信息 -->
          <div class="route-info info-item">
            <el-card class="route-info-card">
              <!-- 有数据时 -->
              <section v-if="item.config || item.flightRoute">
                <div slot="header" class="route-config-header">
                  <el-button
                    type="primary"
                    size="mini"
                    :disabled="pageName || item.status == '3' || status"
                    :loading="item.loading"
                    @click="saveSubmit(item, index)"
                    >保 存</el-button
                  >
                  <el-button
                    v-if="showBtnRule(item)"
                    type="primary"
                    size="mini"
                    icon="el-icon-video-pause"
                    :loading="item.loading"
                    :disabled="pageName || status"
                    @click="onOffSubmit(item, index)"
                    >{{ item.status | statusBtn }}</el-button
                  >
                  <el-button
                    v-if="showBtnRule(item)"
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    :disabled="pageName || item.status !== '3' || status"
                    :loading="item.loading"
                    @click="deleteSubmit(item, index)"
                    >删 除</el-button
                  >
                  <span class="flight-route-title">
                    {{ item.ruleDate ? "日期级别规则" : "普通规则" }}</span
                  >
                </div>
                <el-divider></el-divider>
                <div class="route-config-info">
                  <el-form label-position="right" label-width="120px">
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="始发站">
                          <el-col :span="2">
                            <el-radio-group
                              v-model="item.isLocation"
                              @change="changeLocation({ index, item, $event })"
                              :disabled="pageName || status"
                            >
                              <el-radio label="1">包含始发站</el-radio>
                              <el-radio label="2">不包含始发站</el-radio>
                            </el-radio-group>
                          </el-col>
                          <el-col :span="10">
                            <span style="width: 500px; display: block">
                              <el-input
                                v-show="item.isLocation == '1'"
                                :disabled="pageName || status"
                                type="textarea"
                                v-model="item.location"
                                :rows="4"
                                placeholder="始发站之间用回车符分隔"
                                @blur="location({ index, item, $event })"
                              >
                              </el-input>
                              <el-input
                                v-show="item.isLocation == '2'"
                                :disabled="pageName || status"
                                type="textarea"
                                v-model="item.notLocation"
                                :rows="4"
                                placeholder="始发站之间用回车符分隔"
                                @blur="notLocation({ index, item, $event })"
                              >
                              </el-input>
                            </span>
                            <div class="form-item-error-block">
                              <span
                                class="el-form-item__error"
                              ></span>
                            </div>
                          </el-col>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="目的站">
                          <el-col :span="2">
                            <el-radio-group
                              :disabled="pageName || status"
                              v-model="item.isDestinationSite"
                              @change="
                                changeDestinationSite({ index, item, $event })
                              "
                            >
                              <el-radio label="1">包含目的站</el-radio>
                              <el-radio label="2">不包含目的站</el-radio>
                            </el-radio-group>
                          </el-col>
                          <el-col :span="10">
                            <span style="width: 500px; display: block">
                              <el-input
                                v-show="item.isDestinationSite == '1'"
                                :disabled="pageName || status"
                                type="textarea"
                                v-model="item.destinationSite"
                                :rows="4"
                                placeholder="目的站之间用回车符分隔"
                                @blur="destinationSite({ index, item, $event })"
                              >
                              </el-input>
                              <el-input
                                v-show="item.isDestinationSite == '2'"
                                :disabled="pageName || status"
                                type="textarea"
                                v-model="item.notDestinationSite"
                                :rows="4"
                                placeholder="目的站之间用回车符分隔"
                                @blur="
                                  notDestinationSite({ index, item, $event })
                                "
                              >
                              </el-input>
                            </span>
                            <div class="form-item-error-block">
                              <span
                                class="el-form-item__error"
                              ></span>
                            </div>
                          </el-col>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-col :span="10">
                          <el-form-item label="URSA包含">
                            <el-input
                              :disabled="pageName || status"
                              type="textarea"
                              v-model="item.includeUrsa"
                              :rows="4"
                              placeholder="URSA之间用分号分隔，例：F1_;F2_;F3_"
                              @blur="includeUrsa({ index, item, $event })"
                            >
                            </el-input>
                            <span
                              class="el-form-item__error"
                            ></span>
                          </el-form-item>
                        </el-col>
                        <el-col :span="10">
                          <el-form-item label="URSA不包含">
                            <el-input
                              :disabled="pageName || status"
                              type="textarea"
                              v-model="item.notIncludeUrsa"
                              :rows="4"
                              placeholder="URSA之间用分号分隔，例：F1;F2;F3"
                              @blur="notIncludeUrsa({ index, item, $event })"
                            >
                            </el-input>
                            <div class="form-item-error-block">
                              <span
                                class="el-form-item__error"
                              ></span>
                            </div>
                          </el-form-item>
                        </el-col>
                      </el-col>
                      <el-col :span="24">
                        <el-col :span="9">
                          <el-form-item label="件数">
                            <el-col :span="10">
                              <el-input
                                :disabled="pageName || status"
                                class="numberInput"
                                v-model.trim="item.minNumOfPieces"
                                placeholder="最少件数"
                                @blur="minNumOfPieces({ index, item, $event })"
                              >
                              </el-input>
                              <span
                                class="el-form-item__error"
                              ></span>
                            </el-col>
                            <el-col style="text-align: center" :span="1"
                              >-</el-col
                            >
                            <el-col :span="10">
                              <el-input
                                :disabled="pageName || status"
                                class="numberInput"
                                v-model.trim="item.maxNumOfPieces"
                                placeholder="最多件数"
                                @blur="maxNumOfPieces({ index, item, $event })"
                              >
                              </el-input>
                            </el-col>
                          </el-form-item>
                        </el-col>
                        <el-col :span="9">
                          <el-form-item label="重量(KG)">
                            <el-col :span="10">
                              <el-input
                                :disabled="pageName || status"
                                class="numberInput"
                                v-model.trim="item.minWeight"
                                placeholder="最小重量"
                                @blur="minWeight({ index, item, $event })"
                              >
                              </el-input>
                              <span
                                class="el-form-item__error"
                              ></span>
                            </el-col>
                            <el-col style="text-align: center" :span="1"
                              >-</el-col
                            >
                            <el-col :span="10">
                              <el-input
                                :disabled="pageName || status"
                                class="numberInput"
                                v-model.trim="item.maxWeight"
                                placeholder="最大重量"
                                @blur="maxWeight({ index, item, $event })"
                              >
                              </el-input>
                            </el-col>
                          </el-form-item>
                        </el-col>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="申报类别">
                          <el-card shadow="never" style="width: 95%">
                            <el-checkbox-group
                              :disabled="pageName || status"
                              v-model="item.typeOfGoods"
                              @change="changeCargoType"
                            >
                              <el-row>
                                <el-col
                                  v-for="item in cargoType"
                                  :span="2"
                                  :key="item.id"
                                >
                                  <el-checkbox
                                    v-if="item.status === 1"
                                    :label="item.chineseName"
                                    :name="item.chineseName"
                                    :key="item.code"
                                  >
                                    <Tooltips
                                      :content="item.chineseName"
                                      :refName="item.code"
                                    >
                                    </Tooltips>
                                  </el-checkbox>
                                </el-col>
                              </el-row>
                            </el-checkbox-group>
                          </el-card>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="货物类型">
                          <el-card shadow="never" style="width: 95%">
                            <el-checkbox-group
                              :disabled="pageName || status"
                              v-model="item.cargoType"
                              @change="changeCargoStatus"
                            >
                              <el-row>
                                <el-col
                                  :span="3"
                                  v-for="item in cargoStatus"
                                  :key="item.id"
                                >
                                  <el-checkbox
                                    v-if="item.status === 1"
                                    :label="item.chineseName"
                                    :name="item.chineseName"
                                    :key="item.code"
                                    disabled
                                  >
                                    <Tooltips
                                      :content="item.chineseName"
                                      :refName="item.code"
                                    >
                                    </Tooltips>
                                  </el-checkbox>
                                </el-col>
                              </el-row>
                            </el-checkbox-group>
                          </el-card>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="取件扫描号">
                          <el-card shadow="never" style="width: 95%">
                            <el-checkbox-group
                              :disabled="pageName || status"
                              v-model="item.puporpuxCode"
                              @change="changePuporpux"
                            >
                              <el-row>
                                <el-col
                                  :span="2"
                                  v-for="item in puporpux"
                                  :key="item.id"
                                >
                                  <el-checkbox
                                    v-if="item.status === 1"
                                    :label="item.chineseName"
                                    :name="item.chineseName"
                                    :key="item.code"
                                  >
                                    <Tooltips
                                      :content="item.chineseName"
                                      :refName="item.code"
                                    >
                                    </Tooltips>
                                  </el-checkbox>
                                </el-col>
                              </el-row>
                            </el-checkbox-group>
                          </el-card>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="Service Code">
                          <el-card shadow="never" style="width: 95%">
                            <el-checkbox-group
                              :disabled="pageName || status"
                              v-model="item.serviceCode"
                              @change="changeServiceCode"
                            >
                              <el-row>
                                <el-col
                                  :span="2"
                                  v-for="item in serviceCode"
                                  :key="item.id"
                                >
                                  <el-checkbox
                                    v-if="item.status === 1"
                                    :label="item.chineseName"
                                    :name="item.chineseName"
                                    :key="item.code"
                                  >
                                    <Tooltips
                                      :content="item.chineseName"
                                      :refName="item.code"
                                    >
                                    </Tooltips>
                                  </el-checkbox>
                                </el-col>
                              </el-row>
                            </el-checkbox-group>
                          </el-card>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="Handling Code">
                          <el-card shadow="never" style="width: 95%">
                            <el-checkbox-group
                              :disabled="pageName || status"
                              v-model="item.handlingCode"
                              @change="changeHandlingCode"
                            >
                              <el-row>
                                <el-col
                                  :span="2"
                                  v-for="item in handlingCode"
                                  :key="item.id"
                                >
                                  <el-checkbox
                                    v-if="item.status === 1"
                                    :label="item.chineseName"
                                    :name="item.chineseName"
                                    :key="item.code"
                                  >
                                    <Tooltips
                                      :content="item.chineseName"
                                      :refName="item.code"
                                    >
                                    </Tooltips>
                                  </el-checkbox>
                                </el-col>
                              </el-row>
                            </el-checkbox-group>
                          </el-card>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="Sub Category">
                          <el-card shadow="never" style="width: 95%">
                            <el-checkbox-group
                              :disabled="pageName || status"
                              v-model="item.subCategory"
                              @change="changeSubCategory"
                            >
                              <el-row>
                                <el-col
                                  :span="2"
                                  v-for="item in subCategory"
                                  :key="item.id"
                                >
                                  <el-checkbox
                                    v-if="item.status === 1"
                                    :label="item.chineseName"
                                    :name="item.chineseName"
                                    :key="item.code"
                                  >
                                    <Tooltips
                                      :content="item.chineseName"
                                      :refName="item.code"
                                    >
                                    </Tooltips>
                                  </el-checkbox>
                                </el-col>
                              </el-row>
                            </el-checkbox-group>
                          </el-card>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </section>
              <!-- 没有数据时 -->
              <div class="no-data" v-else>
                <el-empty description="未设置规则！">
                  <el-button
                    type="primary"
                    size="small"
                    :disabled="pageName"
                    @click="addRouteRule(index)"
                    >新增规则</el-button
                  >
                </el-empty>
              </div>
            </el-card>
          </div>
        </el-collapse-item>
      </div>
    </el-collapse>
  </div>
</template>
<script>
export default {
  name: "routeInfo",
  props: {
    routesInfo: {
      // 航线规则信息
      type: Array,
      default: () => [],
    },
    cargoType: {
      // 申报类别
      type: Array,
      default: () => [],
    },
    cargoStatus: {
      // 货物类型
      type: Array,
      default: () => [],
    },
    puporpux: {
      // 取件扫描号
      type: Array,
      default: () => [],
    },
    serviceCode: {
      // Service Code
      type: Array,
      default: () => [],
    },
    handlingCode: {
      // Handling Code
      type: Array,
      default: () => [],
    },
    subCategory: {
      // Sub Category
      type: Array,
      default: () => [],
    },
    status: {
      // 标识是详情还是编辑
      type: Boolean,
      default: false,
    },
    loading: {
      // 折叠面板
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeNames: [0], // 展开指定项
    };
  },
  computed: {
    pageName() {
      if (
        this.$route.query.pageName == "dmLog" ||
        this.$route.query.pageName == "flightRandConfig" ||
        this.$route.query.dataStatus == "view"
      ) {
        return true;
      }
    },
  },
  filters: {
    // 状态：0 无效，1 有效   2 配置中   3 停用
    statusBtn(status) {
      if (status == "0") {
        return "无 效";
      } else if (status == "1") {
        return "停 用";
      } else if (status == "3") {
        return "开 启";
      } else {
        return "保 存";
      }
    },
  },
  methods: {
    // 航线回显逻辑：如果航线无效并且没有数据，则不展示该航线
    showFlightRoute(item) {
      if (this.$route.query.status == "3" && item.config == false) {
        return false;
      } else {
        return true;
      }
    },
    // 航线操作按钮回显逻辑
    showBtnRule(item) {
      /*
       展示保存按钮、开启按钮/停用按钮、删除按钮逻辑如下：
       1：当status状态等于3的时候展示：保存按钮、开启按钮/停用按钮、删除按钮；
       2：当status状态等于1并且ruleDate字段有值的时候展示：保存按钮、开启按钮/停用按钮、删除按钮；
       3：当从航班配置设置不查询日期的时候“查看&修改”的时候，
       有效的航线也就是status状态等于1的时候也要展示：保存按钮、开启按钮/停用按钮、删除按钮；
       4：那么问题来了当从航班配置设置不查询日期的时候状态为1的时候也要展示：保存按钮、开启按钮/停用按钮、删除按钮；
       那么要么跳转的时候传过来一个参数；
       5：如果是从【航班顺位】和【DM数据处理】跳转过来，那么航班航线设置维度只作为详情查看，禁用所有的操作。
       所以展示不展示保存按钮、开启按钮/停用按钮、删除按钮毫无意义
      */
      if (item.status == "3" || (item.status == "1" && item.ruleDate)) {
        return true;
      } else if (
        item.status == "1" &&
        this.$route.query.querySpecifyData == "2"
      ) {
        // 航班配舱设置非日期级别情况下
        return true;
      } else if (item.status == "1" && this.$route.query.dataStatus == "add") {
        // 添加航班配舱设置非日期级别情况下
        return true;
      } else if (item.status == "2") {
        return true;
      } else {
        return false;
      }
    },
    // 当前激活面板改变时触发
    collapseChange(name) {
      this.$emit("collapse", name);
    },
    // 始发站
    changeLocation(item) {
      this.$emit("locRadio", item);
    },
    // 目的站
    changeDestinationSite(item) {
      this.$emit("dessiteRadio", item);
    },
    // 申报类别
    changeCargoType(arr) {
      this.$emit("cargoType", arr);
    },
    // 货物类型
    changeCargoStatus(arr) {
      this.$emit("cargoStatus", arr);
    },
    // 取件扫描号
    changePuporpux(arr) {
      this.$emit("puporpux", arr);
    },
    // Service Code
    changeServiceCode(arr) {
      this.$emit("serviceCode", arr);
    },
    // Handling Code
    changeHandlingCode(arr) {
      this.$emit("handlingCode", arr);
    },
    // Sub Category
    changeSubCategory(arr) {
      this.$emit("subCategory", arr);
    },
    // 新增规则
    addRouteRule(index) {
      this.$emit("addRlue", index);
    },
    // 保存
    saveSubmit(item, index) {
      this.$emit("save", item, index);
    },
    // 开启/暂停
    onOffSubmit(item, index) {
      this.$emit("onOff", item, index);
    },
    // 删除
    deleteSubmit(item, index) {
      this.$emit("delete", item, index);
    },
    // 包含始发站失焦事件
    location(item) {
      this.$emit("locationBur", item);
    },
    // 不包含始发站失焦事件
    notLocation(item) {
      this.$emit("notLocationBur", item);
    },
    // 包含目的站失焦事件
    destinationSite(item) {
      this.$emit("destinationSiteBur", item);
    },
    // 不包含目的站失焦事件
    notDestinationSite(item) {
      this.$emit("notDestinationSiteBur", item);
    },
    // URSA包含失焦事件
    includeUrsa(item) {
      this.$emit("includeUrsaBur", item);
    },
    // URSA不包含失焦事件
    notIncludeUrsa(item) {
      this.$emit("notIncludeUrsaBur", item);
    },
    // 最少件数失焦事件
    minNumOfPieces(item) {
      this.$emit("minNumOfPiecesBur", item);
    },
    // 最多件数失焦事件
    maxNumOfPieces(item) {
      this.$emit("maxNumOfPiecesBur", item);
    },
    // 最小重量失焦事件
    minWeight(item) {
      this.$emit("minWeightBur", item);
    },
    // 最大重量失焦事件
    maxWeight(item) {
      this.$emit("maxWeightBur", item);
    },
  },
};
</script>
<style lang="scss">
.collapse-item-header {
  padding-left: 40px;
}
.el-collapse {
  border: 0 !important;
}
.el-collapse-item__header {
  background-color: #d9ecff !important;
  border-bottom: 1px solid #ccc;
  padding: 0 10px 0 30px;
}
.el-collapse-item__wrap {
  border-bottom: 0 !important;
}
.el-collapse-item {
  border-bottom: 1px solid #ccc;
}
.el-collapse-item:last-child {
}
.route-container {
  strong {
    font-size: 14px;
  }
  .route-info {
    .route-info-card {
      section {
        padding: 12px 70px;
        .route-config-header {
          .flight-route-title {
            margin-left: 8px;
          }
        }
      }
      .route-config-info {
      }
    }
  }
}
.el-form-item__error {
  color: #ff4949;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  font-weight: 500;
  width: 100% !important;
}
</style>