<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-24 15:45:01
-->
<template>
  <div class="page">
    <div class="main">
      <div class="maintop">
        <div class="mainbtn">
          <el-button size="small"
                     @click="openDig"
                     v-hasButtons="['PostageManageAdd']"
                     class="thebtn1">{{'添加'}}</el-button>
        </div>
        <div class="spe">【特殊邮费】开启后，不参与专区包邮金额计算</div>
      </div>
      <div class="maintable">
        <el-table :data="tableData"
        v-loading="loading"
                  style="width: 100%"
                  :header-cell-style="{ background: '#EEEEEE' }"
                  :row-class-name="tableRowClassName"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="55"> </el-table-column>
          <el-table-column align="center"
                           prop="pkCountry"
                           :label="'国家'">
            <template slot-scope="scope">
              <div class="tem">
                <img :src="scope.row.nationalFlag2"
                     alt="" />
                <div>{{ scope.row.shortName }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="tempName"
                           :label="'模板名称'">
          </el-table-column>
          <el-table-column align="center"
                           prop="tranType"
                           :label="'运输方式'">
            <template slot-scope="scope">
              <div v-for="item in transportTypeList"
                   :key="item.value"
                   v-if="scope.row.tranType ==  item.value">
                {{item.label}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="tranType"
                           label="特殊邮费">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isSpecialPostaged"
                         @change="changePost($event,scope.row)"
                         active-color="#13ce66"
                         inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="creationTime"
                           :label="'创建日期'">
          </el-table-column>
          <el-table-column align="center"
                           prop="time"
                           :label="'操作'"
                           fixed="right">
            <template slot-scope="scope">
              <el-button @click="toFixed(scope.row.pkId,true)"
                         type="text"
                         v-hasButtons="['PostageManageCopy']"
                         style="color:#6962F6"
                         size="small">
                {{ '复制' }}
              </el-button>
              <el-button @click="toFixed(scope.row.pkId,false)"
                         type="text"
                         v-hasButtons="['PostageManageEdit']"
                         style="color:#F3A900"
                         size="small">
                {{ '修改' }}
              </el-button>
              <el-button @click="handleDelete(scope.row.pkId)"
                         type="text"
                         size="small"
                         v-hasButtons="['PostageManageDel']"
                         style="color: #c73030">
                {{ '删除' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <pagination v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getDataList" />
    <el-dialog :title="addOrEdit?'添加':'修改'"
               :visible.sync="dialogVisible"
               :close-on-click-modal="false"
               width="70%"
               center
               v-loading="loading"
               :before-close="handleClose">
      <el-form ref="form"
               :rules="rules"
               :model="form"
               label-width="auto">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="'模板名称'">
              <el-input clearable
                        v-model="form.tempName"
                        :placeholder="'请输入'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'运输方式'">
              <el-radio-group v-model="form.tranType">
                <el-radio v-for="item in transportTypeList"
                          :key="item.value"
                          :label="item.value">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="计费方式">
              <el-radio-group v-model="form.chargeType">
                <el-radio v-for="item in chargeList"
                          :key="item.value"
                          :label="item.value">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="form.chargeType==3">
            <el-form-item label="计件方式">
              <el-radio-group v-model="form.quantityMode">
                <el-radio v-for="item in quantityModeList"
                          :key="item.value"
                          :label="item.value">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

        </el-row>
        <!-- 配送区域 -->
        <div class="titAll">
          <div class="titName">配送区域</div>
          <div class="tit_cld">
            <div class="blue"
                 v-if="isAllCheck"
                 @click="allCheck">全选</div>
            <div class="blue"
                 v-else
                 @click="offCheck"> {{ '取消' }}全选</div>
            <div>{{'已选择'}}<span class="blue">{{selLength}}</span>个区域</div>
          </div>
        </div>
        <div class="checkBoxAll">
          <el-checkbox-group v-model="form.changeAreaList">
            <el-checkbox style="margin-bottom:10px"
                         v-for="item,index in allAreaList"
                         :key="item.id"
                         v-if="item.isShow"
                         :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
          <div class="btn">
            <el-button size="small"
                       @click="resetBox"> {{ '返回' }}</el-button>
            <el-button size="small"
                       @click="getBoxTrue"
                       type="primary"> {{ '确认' }}</el-button>
          </div>
        </div>
        <div class="tableList">
          <table v-for="item,index in psAreaList"
                 @click="changeArea(index)"
                 :key="index"
                 :class="isArea ==index?'act':''">
            <tr>
              <th colspan="4"
                  align="left"
                  valign="top"
                  class="bigBox"
                  rowspan="2">
                <el-tag v-for="ctem in item.areaIds"
                        :key="ctem.id"
                        style="margin-right:10px;margin-bottom:15px"
                        effect="plain"
                        closable
                        @close="cansoleTag(index,ctem.id)">
                  {{ ctem.name }}
                </el-tag>
              </th>
              <th v-if="form.chargeType==3">首件</th>
              <th v-else>首重(KG)</th>
              <th>运费(¥)</th>
              <th v-if="form.chargeType==3">续件</th>
              <th v-else>续重(KG)</th>
              <th>运费(¥)</th>
              <th v-show="form.chargeType!=3">抛货值</th>
            </tr>
            <tr>
              <td>
                <el-input clearable
                          size="medium"
                          v-model="item.firstWeight"></el-input>
              </td>
              <td>
                <el-input clearable
                          size="medium"
                          v-model="item.firstPostage"></el-input>
              </td>
              <td colspan="2"
                  align="center"
                  valign="center"
                  class="connectTd">
                <el-row :gutter="10"
                        class="connect_item"
                        v-for="ctem,cdex in item.postageDetailInfoList"
                        :key="cdex">
                  <el-col :span="10">
                    <el-input clearable
                              size="medium"
                              v-model="ctem.continuedWeight"></el-input>
                  </el-col>
                  <el-col :span="10">
                    <el-input clearable
                              size="medium"
                              v-model="ctem.continuedPostage"></el-input>
                  </el-col>
                  <el-col :span="2">
                    <i class="el-icon-delete"
                       @click.stop="delTwoData(index,cdex,psAreaList)"
                       style="font-size:14px;line-height: 40px;"></i>
                  </el-col>
                </el-row>
                <el-row class="connect_item noBtm">
                  <div @click.stop="addTwoData(index,psAreaList)"> <i class="el-icon-circle-plus-outline"></i></div>

                </el-row>
              </td>
              <td v-show="form.chargeType!=3">
                <el-input clearable
                          size="medium"
                          v-model="item.volumeRatio"></el-input>
              </td>
            </tr>
          </table>
          <div class="addArea">
            <el-button size="small"
                       @click="addArea"
                       type="primary">{{'添加'}}区域</el-button>
            <el-button size="small"
                       v-show="psAreaList.length > 1"
                       @click="delTableList(psAreaList,isArea,0)"
                       class="thebtn2"> {{ '删除' }}区域</el-button>
          </div>
        </div>
        <!-- 专区免邮配置 -->
        <div class="titAll">
          <div class="titName">专区免邮配置</div>
        </div>
        <el-row style="margin-top:20px">
          <el-col :span="4"
                  v-for="item,index in orderList"
                  :key="index">
            <el-form-item :label="item.label">
              <el-input clearable
                        size="medium"
                        v-model="item.postage"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 特殊区域 -->
        <div class="titAll">
          <div class="titName">特殊区域</div>
        </div>
        <div class="checkBoxAll">
          <el-checkbox-group v-model="form.changeTsAreaList">
            <el-checkbox style="margin-bottom:10px"
                         @change="dadChange($event,item,index)"
                         v-for="item,index in allTsAreaList"
                         :key="item.id"
                         v-if="item.isShow"
                         :label="item.id">
              <el-popover placement="bottom"
                          width="700"
                          trigger="click">
                <el-checkbox-group v-model="item.changeTsCldList"
                                   @change="childChange(item.id,item.changeTsCldList.length,item.children)">
                  <el-checkbox v-for="ctm,cdex in item.children"
                               :key="ctm.id"
                               v-if="ctm.isShow"
                               :label="ctm.id">{{ ctm.name }}</el-checkbox>
                </el-checkbox-group>
                <div slot="reference"
                     v-show="item.children"
                     style="display:flex"
                     @click.prevent="openArea(item.id)">{{item.name}}
                  <div class="yello"
                       v-show="item.changeTsCldList.length>0">({{item.changeTsCldList.length}})</div>
                </div>
              </el-popover>
              <div v-show="item.children == undefined"
                   style="display:flex"
                   @click.prevent="openArea(item.id)">{{item.name}}
                <div class="yello"
                     v-show="item.changeTsCldList.length>0">({{item.changeTsCldList.length}})</div>
              </div>
            </el-checkbox>
          </el-checkbox-group>
          <div class="btn">
            <el-button size="small"
                       @click="resetBoxTs"> {{ '返回' }}</el-button>
            <el-button size="small"
                       @click="getBoxTrueTs"
                       type="primary"> {{ '确认' }}</el-button>
          </div>
          <div class="tableList">
            <table v-for="item,index in tsAreaList"
                   @click="changeAreaTs(index)"
                   :key="index"
                   :class="isAreaTs ==index?'act':''">
              <tr>
                <th colspan="4"
                    align="left"
                    valign="top"
                    class="bigBox"
                    rowspan="2">
                  <el-tag v-for="ctem in item.areaIds"
                          :key="ctem.id"
                          style="margin-right:10px;margin-bottom:15px"
                          effect="plain"
                          closable
                          @close="cansoleTsTag(index,ctem.id)">
                    {{ ctem.name }}
                  </el-tag>
                </th>
                <th v-if="form.chargeType==3">首件</th>
                <th v-else>首重(KG)</th>
                <th>运费(¥)</th>
                <th v-if="form.chargeType==3">续件</th>
                <th v-else>续重(KG)</th>
                <th>运费(¥)</th>
                <th v-show="form.chargeType!=3">抛货值</th>
              </tr>
              <tr>
                <td>
                  <el-input clearable
                            size="medium"
                            v-model="item.firstWeight"></el-input>
                </td>
                <td>
                  <el-input clearable
                            size="medium"
                            v-model="item.firstPostage"></el-input>
                </td>
                <td colspan="2"
                    align="center"
                    valign="center"
                    class="connectTd">
                  <el-row :gutter="10"
                          class="connect_item"
                          v-for="ctem,cdex in item.postageDetailInfoList"
                          :key="cdex">
                    <el-col :span="10">
                      <el-input clearable
                                size="medium"
                                v-model="ctem.continuedWeight"></el-input>
                    </el-col>
                    <el-col :span="10">
                      <el-input clearable
                                size="medium"
                                v-model="ctem.continuedPostage"></el-input>
                    </el-col>
                    <el-col :span="2">
                      <i class="el-icon-delete"
                         @click.stop="delTwoData(index,cdex,tsAreaList)"
                         style="font-size:14px;line-height: 40px;"></i>
                    </el-col>
                  </el-row>
                  <el-row class="connect_item noBtm">
                    <i class="el-icon-circle-plus-outline"
                       @click.stop="addTwoData(index,tsAreaList)"></i>
                  </el-row>
                </td>
                <td v-show="form.chargeType!=3">
                  <el-input clearable
                            size="medium"
                            v-model="item.volumeRatio"></el-input>
                </td>
              </tr>
              <tr>
                <td :colspan="form.chargeType==3?8:9"
                    style="padding:10px 20px 0 0">
                  <el-row>
                    <el-col :span="4"
                            v-for="ctm,cdx in item.specialAreaList"
                            :key="cdx">
                      <el-form-item :label="ctm.label">
                        <el-input clearable
                                  size="medium"
                                  v-model="ctm.postage"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </td>
              </tr>
            </table>
            <div class="addArea">
              <el-button size="small"
                         @click="addAreaTs"
                         type="primary">{{'添加'}}区域</el-button>
              <el-button size="small"
                         v-show="tsAreaList.length > 1"
                         @click="delTableList(tsAreaList,isAreaTs,1)"
                         class="thebtn2"> {{ '删除' }}区域</el-button>
            </div>
          </div>
        </div>
        <!-- 不能发货区域 -->
        <div class="titAll">
          <div class="titName">不能发货区域</div>
        </div>
        <div class="checkBoxAll">
          <el-checkbox-group v-model="form.changeNoAreaList">
            <el-checkbox style="margin-bottom:10px"
                         @change="dadChangeNo($event,item,index)"
                         v-for="item,index in allNoAreaList"
                         :key="item.id"
                         v-if="item.isShow"
                         :label="item.id">
              <el-popover placement="bottom"
                          width="700"
                          trigger="click">
                <el-checkbox-group v-model="item.changeNoCldList"
                                   @change="childChangeNo(item.id,item.changeNoCldList.length,item.children)">
                  <el-checkbox v-for="ctm,cdex in item.children"
                               :key="ctm.id"
                               v-if="ctm.isShow"
                               :label="ctm.id">{{ ctm.name }}</el-checkbox>
                </el-checkbox-group>
                <div slot="reference"
                     style="display:flex"
                     @click.prevent="openArea(item.id)">{{item.name}}
                  <div class="yello"
                       v-show="item.changeNoCldList.length>0">({{item.changeNoCldList.length}})</div>
                </div>
              </el-popover>
            </el-checkbox>
          </el-checkbox-group>
          <div class="btn">
            <el-button size="small"
                       @click="resetBoxNo"> {{ '返回' }}</el-button>
            <el-button size="small"
                       @click="getBoxTrueNo"
                       type="primary"> {{ '确认' }}</el-button>
          </div>
          <div class="tableList">
            <table v-for="item,index in noAreaList"
                   @click="changeAreaNo(index)"
                   :key="index"
                   :class="isAreaNo ==index?'act':''">
              <tr>
                <th colspan="4"
                    align="left"
                    valign="top"
                    class="bigBox"
                    rowspan="2">
                  <el-tag v-for="ctem in item.areaIds"
                          :key="ctem.id"
                          style="margin-right:10px;margin-bottom:15px"
                          effect="plain"
                          closable
                          @close="cansoleNoTag(index,ctem.id)">
                    {{ ctem.name }}
                  </el-tag>
                </th>
              </tr>
              <tr>
                <td colspan="5">
                  <el-input clearable
                            size="medium"
                            v-model="item.warnNotice"></el-input>
                </td>
              </tr>
            </table>
            <div class="addArea">
              <el-button size="small"
                         @click="addAreaNo"
                         type="primary">{{'添加'}}区域</el-button>
              <el-button size="small"
                         v-show="noAreaList.length > 1"
                         @click="delTableList(noAreaList,isAreaNo,2)"
                         class="thebtn2"> {{ '删除' }}区域</el-button>
            </div>
          </div>
        </div>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="handleClose">{{'取消'}}</el-button>
        <el-button type="primary"
                   @click="onSubmit('form')">{{'确认'}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import * as api from '@/api/product.js'
import { classifyUpdate, classifySave } from '@/api/product'
export default {
  name: 'Bzpz',
  components: {
    topBar,
  },
  filters: {
    isAgree(val) {
      if (!val) {
        return '允许'
      } else {
        return '禁止'
      }
    },
  },
  data() {
    return {
      loading: false,
      psAreaList: [
        {
          areaIds: [],
          firstWeight: '',
          firstPostage: '',
          postageDetailInfoList: [
            {
              continuedWeight: '',
              continuedPostage: '',
            },
          ],
          volumeRatio: '',
        },
      ],
      tsAreaList: [
        {
          areaIds: [],
          firstWeight: '',
          firstPostage: '',
          postageDetailInfoList: [
            {
              continuedWeight: '',
              continuedPostage: '',
            },
          ],
          volumeRatio: '',
        },
      ],
      noAreaList: [
        {
          areaIds: [],
          warnNotice: '',
        },
      ],
      creationTime: [],
      select: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      addOrEdit: '',
      total: 0,
      dialogVisible: false,
      loading:false,
      tableData: [],
      form: {
        tempName: '',
        tranType: 1,
        chargeType: 1,
        quantityMode: 1,
        changeAreaList: [],
        changeTsAreaList: [],
        changeNoAreaList: [],
      },
      rules: {
        name: [
          { required: true, message: '请输入规格类型', trigger: 'blur' },
        ],
      },
      transportTypeList: [],
      chargeList: [],
      quantityModeList: [],
      isArea: 0, //正常区域选折下标
      allAreaList: [], //正常区域
      allTsAreaList: [], //特殊区域
      allNoAreaList: [], //不能发货区域
      isAllCheck: true, //全选
      orderList: [], //专区
      orgArr: [], //干净专区
      isAreaTs: 0, //特殊区域选折下标
      isAreaNo: 0, //不能区域选折下标
      selLength: 0,
    }
  },
  mounted() {
    // 获取列表
    this.getDataList()
    // 运输方式
    this.getTransportType()
    // 计费方式
    this.getChargeType()
    // 计件方式
    this.getQuantityModeType()
    // 查询全部地区
    this.findAllArea()
    // 专区
    this.orderType()
  },
  methods: {
    changePost(e, row) {
      api
        .specialPostage({
          pkPostage: row.pkId,
          isSpecialPostage: e ? 0 : 1,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success',
            })
          }
        })
    },
    // 特殊区域子级选中
    // 父级id，选中id的长度，子级总长度
    childChange(id, checked, childrenList) {
      // let arr = []
      // // 不能用子级总长度，应该用子级show的数据的长度
      // childrenList.forEach((item) => {
      //   if (item.isShow == true) {
      //     arr.push(item)
      //   }
      // })
      if (checked == childrenList.length) {
        this.form.changeTsAreaList.push(id)
      } else {
        if (this.form.changeTsAreaList.indexOf(id) == 0) {
          this.form.changeTsAreaList.splice(
            this.form.changeTsAreaList.indexOf(id),
            1
          )
        }
      }
    },
    // 不能区域子级选中
    // 父级id，选中id的长度，子级总长度
    childChangeNo(id, checked, childrenList) {
      // let arr = []
      // // 不能用子级总长度，应该用子级show的数据的长度
      // childrenList.forEach((item) => {
      //   if (item.isShow == true) {
      //     arr.push(item)
      //   }
      // })
      if (checked == childrenList.length) {
        this.form.changeNoAreaList.push(id)
      } else {
        if (this.form.changeNoAreaList.indexOf(id) == 0) {
          this.form.changeNoAreaList.splice(
            this.form.changeNoAreaList.indexOf(id),
            1
          )
        }
      }
    },
    // 特殊区域父级选中
    dadChange(check, item, index) {
      item.changeTsCldList = []
      if (check) {
        // item.
        if (item.children) {
          item.children.forEach((cld) => {
            item.changeTsCldList.push(cld.id)
          })
        }
      }
    },
    // 不能区域父级选中
    dadChangeNo(check, item, index) {
      item.changeNoCldList = []
      if (check) {
        // item.
        if (item.children) {
          item.children.forEach((cld) => {
            item.changeNoCldList.push(cld.id)
          })
        }
      }
    },
    // 特殊区域展开
    openArea(id) {},
    // 专区
    orderType() {
      api.orderType().then((res) => {
        this.orderList = res.data
        this.orderList.forEach((item) => {
          item.label = item.label.replace('订单', '(￥)')
          item.orderType = item.value
          // item.postage = ''
        })
        this.orgArr = JSON.parse(JSON.stringify(this.orderList))
        this.tsAreaList.forEach((item, index) => {
          this.$set(
            this.tsAreaList[index],
            'specialAreaList',
            JSON.parse(JSON.stringify(this.orgArr))
          )
        })
      })
    },
    // 特殊重置
    resetBoxTs() {
      this.allTsAreaList.forEach((item) => {
        item.isShow = true
        if (item.children) {
          item.children.forEach((ctm) => {
            ctm.isShow = true
          })
        }
      })
      this.tsAreaList = []
      this.addAreaTs()
      this.form.changeTsAreaList = []
      this.allTsAreaList.forEach((item) => {
        item.changeTsCldList = []
      })
    },
    // 不能重置
    resetBoxNo() {
      this.allNoAreaList.forEach((item) => {
        item.isShow = true
        if (item.children) {
          item.children.forEach((ctm) => {
            ctm.isShow = true
          })
        }
      })
      this.noAreaList = []
      this.addAreaNo()
      this.form.changeNoAreaList = []
      this.allNoAreaList.forEach((item) => {
        item.changeNoCldList = []
      })
    },
    // 重置
    resetBox() {
      this.allAreaList.forEach((item) => {
        item.isShow = true
      })
      this.psAreaList = []
      this.addArea()
      this.offCheck()
    },
    // 全选
    allCheck() {
      this.allAreaList.forEach((item) => {
        if (item.isShow == true) {
          this.form.changeAreaList.push(item.id)
        }
      })
      this.isAllCheck = false
    },
    // 取消全选
    offCheck() {
      this.form.changeAreaList = []
      this.isAllCheck = true
    },
    // 取消选中地区
    cansoleTag(dd, id) {
      this.psAreaList[dd].areaIds.forEach((item, index) => {
        if (item.id == id) {
          this.psAreaList[dd].areaIds.splice(index, 1)
        }
      })
      this.allAreaList.forEach((item) => {
        if (item.id == id) {
          item.isShow = true
        }
      })
    },
    // 特殊区域标签删除
    cansoleTsTag(dd, id) {
      this.tsAreaList[dd].areaIds.forEach((item, index) => {
        if (item.id == id) {
          this.tsAreaList[dd].areaIds.splice(index, 1)
        }
      })
      this.allTsAreaList.forEach((item) => {
        if (item.id == id) {
          item.isShow = true
          if (item.children) {
            item.children.forEach((ctm) => {
              ctm.isShow = true
            })
          }
        }
        if (item.children) {
          item.children.forEach((atm) => {
            if (atm.id == id) {
              atm.isShow = true
              item.isShow = true
            }
          })
        }
      })
    },
    // 不能区域标签删除
    cansoleNoTag(dd, id) {
      this.noAreaList[dd].areaIds.forEach((item, index) => {
        if (item.id == id) {
          this.noAreaList[dd].areaIds.splice(index, 1)
        }
      })
      this.allNoAreaList.forEach((item) => {
        if (item.id == id) {
          item.isShow = true
          if (item.children) {
            item.children.forEach((ctm) => {
              ctm.isShow = true
            })
          }
        }
        if (item.children) {
          item.children.forEach((atm) => {
            if (atm.id == id) {
              atm.isShow = true
              item.isShow = true
            }
          })
        }
      })
    },
    // 确认选中配送区域
    getBoxTrue() {
      let checkArr = []
      let selLength = 0
      this.allAreaList.forEach((item) => {
        this.form.changeAreaList.forEach((ctm) => {
          if (item.id == ctm) {
            item.isShow = false
            this.psAreaList[this.isArea].areaIds.push(item)
          }
        })
        if (item.isShow == false) {
          selLength++
        }
      })
      this.selLength = selLength
      this.form.changeAreaList = []
    },
    // 确认选中特殊区域
    getBoxTrueTs() {
      let checkArr = []
      this.allTsAreaList.forEach((item) => {
        this.form.changeTsAreaList.forEach((ctm) => {
          if (item.id == ctm) {
            item.isShow = false
            this.tsAreaList[this.isAreaTs].areaIds.push(item)
          }
        })
        if (item.children) {
          item.children.forEach((atm) => {
            item.changeTsCldList.forEach((stm) => {
              if (atm.id == stm) {
                atm.isShow = false
                this.tsAreaList[this.isAreaTs].areaIds.push(atm)
              }
            })
          })
        }
      })
      this.allTsAreaList.forEach((item) => {
        item.sel = 0
        this.tsAreaList[this.isAreaTs].areaIds.forEach((ctm) => {
          if (item.id == ctm.parentId) {
            item.sel++
          }
        })
        if (item.children) {
          if (item.children.length == item.sel) {
            this.tsAreaList[this.isAreaTs].areaIds.push(item)
          }
        }
      })
      this.allTsAreaList.forEach((item) => {
        item.sel = 0
        this.tsAreaList.forEach((ctm) => {
          ctm.areaIds.forEach((stm) => {
            if (item.id == stm.parentId) {
              item.sel++
            }
          })
        })
        if (item.children) {
          if (item.children.length == item.sel) {
            item.isShow = false
          }
        }
      })
      let arr = this.tsAreaList[this.isAreaTs].areaIds
      for (var i = 0; i < arr.length; i++) {
        // 首次遍历数组
        for (var j = i + 1; j < arr.length; j++) {
          // 再次遍历数组
          if (arr[i].id == arr[j].parentId) {
            // 判断连个值是否相等
            arr.splice(j, 1) // 相等删除后者
            j--
          }
          if (arr[i].parentId == arr[j].id) {
            // 判断连个值是否相等
            arr.splice(i, 1) // 相等删除后者
            i--
          }
        }
      }
      this.unique1(arr)
      this.form.changeTsAreaList = []
      this.allTsAreaList.forEach((item) => {
        item.changeTsCldList = []
      })
    },
    // 数组对象去重
    unique1(arr) {
      for (var i = 0; i < arr.length; i++) {
        // 首次遍历数组
        for (var j = i + 1; j < arr.length; j++) {
          // 再次遍历数组
          if (arr[i].id == arr[j].id) {
            // 判断连个值是否相等
            arr.splice(j, 1) // 相等删除后者
            j--
          }
        }
      }
      return arr
    },
    // 确认选中不能区域
    getBoxTrueNo() {
      let checkArr = []
      this.allNoAreaList.forEach((item) => {
        this.form.changeNoAreaList.forEach((ctm) => {
          if (item.id == ctm) {
            item.isShow = false
            this.noAreaList[this.isAreaNo].areaIds.push(item)
          }
        })
        if (item.children) {
          item.children.forEach((atm) => {
            item.changeNoCldList.forEach((stm) => {
              if (atm.id == stm) {
                atm.isShow = false
                this.noAreaList[this.isAreaNo].areaIds.push(atm)
              }
            })
          })
        }
      })
      this.allNoAreaList.forEach((item) => {
        item.sel = 0
        this.noAreaList[this.isAreaNo].areaIds.forEach((ctm) => {
          if (item.id == ctm.parentId) {
            item.sel++
          }
        })
        if (item.children) {
          if (item.children.length == item.sel) {
            this.noAreaList[this.isAreaNo].areaIds.push(item)
          }
        }
      })
      this.allNoAreaList.forEach((item) => {
        item.sel = 0
        this.noAreaList.forEach((ctm) => {
          ctm.areaIds.forEach((stm) => {
            if (item.id == stm.parentId) {
              item.sel++
            }
          })
        })
        if (item.children) {
          if (item.children.length == item.sel) {
            item.isShow = false
          }
        }
      })
      let arr = this.noAreaList[this.isAreaNo].areaIds
      for (var i = 0; i < arr.length; i++) {
        // 首次遍历数组
        for (var j = i + 1; j < arr.length; j++) {
          // 再次遍历数组
          if (arr[i].id == arr[j].parentId) {
            // 判断连个值是否相等
            arr.splice(j, 1) // 相等删除后者
            j--
          }
          if (arr[i].parentId == arr[j].id) {
            // 判断连个值是否相等
            arr.splice(i, 1) // 相等删除后者
            i--
          }
        }
      }
      this.unique1(arr)
      this.form.changeNoAreaList = []
      this.allNoAreaList.forEach((item) => {
        item.changeNoCldList = []
      })
    },
    // 查询全部地区
    findAllArea() {
      api.findAllArea().then((res) => {
        this.allAreaList = res.data
        this.allAreaList.forEach((item) => {
          if (item.children) {
            item.children.forEach((ctm, cdx) => {
              ctm.isShow = true
            })
          }
          item.isShow = true
        })
        this.allTsAreaList = JSON.parse(JSON.stringify(this.allAreaList))
        this.allTsAreaList.forEach((item, index) => {
          this.$set(this.allTsAreaList[index], 'changeTsCldList', [])
        })
        this.allNoAreaList = JSON.parse(JSON.stringify(this.allAreaList))
        this.allNoAreaList.forEach((item, index) => {
          this.$set(this.allNoAreaList[index], 'changeNoCldList', [])
        })
      })
    },
    // 删除区域
    // 要把选中的有数据的还回列表
    delTableList(arrList, click, nest) {
      if (nest == 0) {
        arrList[click].areaIds.forEach((ctm) => {
          this.allAreaList.forEach((item) => {
            if (item.id == ctm.id) {
              item.isShow = true
            }
          })
        })
      } else if (nest == 1) {
        arrList[click].areaIds.forEach((ctm) => {
          this.allTsAreaList.forEach((item) => {
            if (item.id == ctm.id) {
              item.isShow = true
              if (item.children) {
                item.children.forEach((ctm) => {
                  ctm.isShow = true
                })
              }
            }
            if (item.children) {
              item.children.forEach((atm) => {
                if (atm.id == ctm.id) {
                  atm.isShow = true
                }
              })
            }
          })
        })
      } else if (nest == 2) {
        arrList[click].areaIds.forEach((ctm) => {
          this.allNoAreaList.forEach((item) => {
            if (item.id == ctm.id) {
              item.isShow = true
              if (item.children) {
                item.children.forEach((ctm) => {
                  ctm.isShow = true
                })
              }
            }
            if (item.children) {
              item.children.forEach((atm) => {
                if (atm.id == ctm.id) {
                  atm.isShow = true
                }
              })
            }
          })
        })
      }
      setTimeout(() => {
        arrList.splice(click, 1)
        click = arrList.length - 1
      }, 50)
    },
    // 选择区域
    changeArea(index) {
      this.isArea = index
    },
    // 选择特殊区域
    changeAreaTs(index) {
      this.isAreaTs = index
    },
    // 选择不能区域
    changeAreaNo(index) {
      this.isAreaNo = index
    },
    // 删除续重
    delTwoData(index, cndx, arrList) {
      arrList[index].postageDetailInfoList.splice(cndx, 1)
    },
    // 添加续重
    addTwoData(index, arrList) {
      arrList[index].postageDetailInfoList.push({
        continuedWeight: '',
        continuedPostage: '',
      })
    },
    // 添加配送区域
    addArea() {
      this.psAreaList.push({
        areaIds: [],
        firstWeight: '',
        firstPostage: '',
        postageDetailInfoList: [
          {
            continuedWeight: '',
            continuedPostage: '',
          },
        ],
        volumeRatio: '',
      })
      this.isArea = this.psAreaList.length - 1
    },
    // 添加区域
    addAreaTs() {
      this.tsAreaList.push({
        areaIds: [],
        firstWeight: '',
        firstPostage: '',
        postageDetailInfoList: [
          {
            continuedWeight: '',
            continuedPostage: '',
          },
        ],
        volumeRatio: '',
        specialAreaList: JSON.parse(JSON.stringify(this.orgArr)),
      })
      this.isAreaTs = this.tsAreaList.length - 1
    },
    // 不能区域添加
    addAreaNo() {
      this.noAreaList.push({
        areaIds: [],
        question: '',
      })
      this.isAreaNo = this.noAreaList.length - 1
    },
    // 运输方式
    getTransportType() {
      api.transportType().then((res) => {
        this.transportTypeList = res.data
      })
    },
    // 计费方式
    getChargeType() {
      api.getChargeType().then((res) => {
        this.chargeList = res.data
      })
    },
    // 计件方式
    getQuantityModeType() {
      api.getQuantityModeType().then((res) => {
        this.quantityModeList = res.data
      })
    },
    // 点击修改
    toFixed(id, blun) {
      this.addOrEdit = blun
      this.dialogVisible = true
      api.postageDetail({ postageId: id }).then((res) => {
        this.form = res.data
        this.form.pkId = id
        this.$set(this.form, 'changeAreaList', [])
        this.$set(this.form, 'changeTsAreaList', [])
        this.$set(this.form, 'changeNoAreaList', [])
        this.psAreaList = this.form.postageDetailList
        this.noAreaList = this.form.postageFailAreaList
        this.tsAreaList = this.form.peculiarPostageDetailList
        this.orderList.forEach((item) => {
          this.form.specialAreaList.forEach((ctm) => {
            if (item.orderType == ctm.orderType) {
              this.$set(item, 'postage', ctm.postage || '')
            }
          })
        })
        this.allAreaList.forEach((item1) => {
          if (item1.children) {
            item1.children.forEach((item2) => {
              this.psAreaList.forEach((item3) => {
                item3.areaIds.forEach((item4) => {
                  if (item4.pkId == item1.id) {
                    Object.assign(item4, item1)
                    item1.isShow = false
                  } else if (item4.pkId == item2.id) {
                    Object.assign(item4, item2)
                    item1.isShow = false
                  }
                })
              })
            })
          }
          this.psAreaList.forEach((item3) => {
            item3.areaIds.forEach((item4) => {
              if (item4.pkId == item1.id) {
                Object.assign(item4, item1)
                item1.isShow = false
              }
            })
          })
        })
        this.allTsAreaList.forEach((item1) => {
          if (item1.children) {
            item1.children.forEach((item2) => {
              this.tsAreaList.forEach((item3) => {
                item3.areaIds.forEach((item4) => {
                  if (item4.pkId == item1.id) {
                    Object.assign(item4, item1)
                    item1.isShow = false
                  }
                  if (item4.pkId == item2.id) {
                    Object.assign(item4, item2)
                    // item1.isShow = false
                    item2.isShow = false
                  }
                })
              })
            })
          }
          this.tsAreaList.forEach((item3) => {
            item3.areaIds.forEach((item4) => {
              if (item4.pkId == item1.id) {
                Object.assign(item4, item1)
                item1.isShow = false
              }
            })
          })
        })
        this.allNoAreaList.forEach((item1) => {
          if (item1.children) {
            item1.children.forEach((item2) => {
              this.noAreaList.forEach((item3) => {
                item3.areaIds.forEach((item4) => {
                  if (item4.pkId == item1.id) {
                    Object.assign(item4, item1)
                    item1.isShow = false
                  }
                  if (item4.pkId == item2.id) {
                    Object.assign(item4, item2)
                    item2.isShow = false
                  }
                })
              })
            })
          }
          this.noAreaList.forEach((item3) => {
            item3.areaIds.forEach((item4) => {
              if (item4.pkId == item1.id) {
                Object.assign(item4, item1)
                item1.isShow = false
              }
            })
          })
        })
        this.orderList.forEach((item) => {
          this.tsAreaList.forEach((item1) => {
            item1.specialAreaList.forEach((item2) => {
              if (item.orderType == item2.orderType) {
                item2.label = item.label
              }
            })
          })
        })
      })
    },
    // 删除
    handleDelete(id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        api.postageDel(id).then((res) => {
          this.getDataList()
        })
      })
    },
    onSubmit(formName) {
      this.form.postageDetailList = this.psAreaList
      this.form.peculiarPostageDetailList = this.tsAreaList
      this.form.postageFailAreaList = this.noAreaList
      this.form.specialAreaList = this.orderList
      // api.postageSave
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          let url = ''
          if (this.addOrEdit == true) {
            url = api.postageSave
          } else {
            url = api.postageUpdate
          }
          // api.postageUpdate
          url(this.form).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: 'success',
              })
              this.dialogVisible = false
              // // 充值数据
              // this.$refs[formName].resetFields()
              // // 获取列表
              this.getDataList()
            }
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.resetBox()
      this.resetBoxTs()
      this.resetBoxNo()
      this.orderList.forEach((item) => {
        // item.postage = ''
        this.$set(item, 'postage', '')
      })
      console.log(
        '%c [ this.orderList ]-1202',
        'font-size:13px; background:#a493a9; color:#e8d7ed;',
        this.orderList
      )
      this.form = {
        tempName: '',
        tranType: 1,
        chargeType: 1,
        quantityMode: 1,
        changeAreaList: [],
        changeTsAreaList: [],
        changeNoAreaList: [],
      }
      this.$forceUpdate()
      // this.$refs['form'].clearValidate()
      // this.$refs['form'].resetFields()
    },
    openDig() {
      this.dialogVisible = true
      this.addOrEdit = true
    },
    getDataList() {
      this.loading = true

      api
        .postageList(Object.assign({}, this.queryParams, this.select))
        .then((res) => {
          res.rows.forEach((item) => {
            if (item.isSpecialPostage == 0) {
              item.isSpecialPostaged = true
            } else {
              item.isSpecialPostaged = false
            }
          })

this.loading = false
          this.tableData = res.rows
          this.total = res.total
        })
    },
    handleSelectionChange(val) {},
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return api.exportClassIfy(queryParams)
        })
        .then((response) => {
          this.download(response)
        })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}
::v-deep .el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
}
::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
::v-deep .el-select {
  width: 100%;
}
.uploadIcon ::v-deep .el-upload--picture-card {
  display: none !important; /* 上传按钮隐藏 */
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    .maintop {
      display: flex;
      padding: 0px 0 3px 0;
      justify-content: space-between;
      align-items: center;
      .mainbtn {
        .thebtn1 {
          background: #3181e5;
          color: #ffffff;
        }
      }
      .spe {
        color: #ed1d25;
      }
      .maintitle {
        font-size: 10px;
        font-family: MicrosoftYaHei;
        color: #999999;
      }
    }
  }
  .thebtn2 {
    background: #ffad41;
    color: #ffffff;
  }
  .tem {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 28px;
      height: 20px;
      margin-right: 3px;
    }
  }
  .isRed {
    color: #ed1d25;
  }
  .isGreen {
    color: #1ab62b;
  }
  .bgImg {
    width: 48px;
    height: 48px;
  }
}
.openClose {
  text-align: right;
  margin-right: 10px;
  color: #3181e5;
}
.titAll {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  padding-bottom: 10px;
  .titName {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin-right: 20px;
  }
  .tit_cld {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #666666;
    font-size: 12px;
    .blue {
      color: #3181e5;
    }
  }
}
.btn {
  margin-top: 10px;
}
.tableList {
  .connectTd {
    padding: 0;
    .connect_item {
      padding: 20px;
      border-bottom: 1px solid #cccccc;
    }
    .noBtm {
      border-bottom: 0;
    }
  }
}
table {
  width: 100%;
  background: #fff;
  border-collapse: collapse;
  margin-top: 20px;
  border: 1px solid #cccccc;
  border-spacing: 0;
  table-layout: fixed;
  /*border-collapse:collapse合并内外边距
(去除表格单元格默认的2个像素内外边距*/
}
.act {
  background: #e7f0f9;
  // border: 1px solid #f30707;;
}
th {
  padding: 30px 0;
  text-align: center;
  border: 1px solid #cccccc;
}
td {
  padding: 15px 20px;
  text-align: center;
  border: 1px solid #cccccc;
  overflow: hidden;
}
.bigBox {
  text-align: left;
  padding: 10px;
}
.addArea {
  text-align: center;
  margin-top: 15px;
}
.checkBoxAll {
  margin-top: 10px;
}
.yello {
  color: #ffad41;
}
</style>
