<template>
  <div
    class="diffrenceReason" data-key="RESOLVE_RULES">
    <div class="leftType">
      <div class="topTitle">
        已有财务类型
        <Tooltip
          max-width="400"
          content="如果账单未被任何一个财务类型识别，将自动归为【其他】类型"
          placement="bottom"
        >
          <img
            class="img-framelanflag"
            src="../../assets/icon/help.png"
          >
        </Tooltip>
      </div>
      <div class="differenceList differenceDefault">
        <div class="listTitle">
          默认类型
        </div>
        <div class="listContent">
          <li
            v-for="(item, index) in differenceDefaultList"
            :key="item.billtypecode"
            class="expressItem"
            :class="item.isClick?'clickedItem':''"
            @click="clickExpressItem(index,'default')"
          >
            <span class="labelSpan">{{ item.billtype }}（{{ item.billtypecode }}）</span>
            <span
              class="switchItem"
              @click.stop='stopClickSwitch'
            >
              <i-switch
                v-model="item.isactive"
                size="large"
                @on-change="changeIsActive(item)"
              >
                <!-- @on-change="changeIsActive(diff)" -->
                <span slot="open">启用</span>
                <span slot="close">停用</span>
              </i-switch>
            </span>
            <!-- <span
              class="switchItem defaultItem"
            >
              默认 开
            </span> -->
          </li>
        </div>
      </div>
      <div
        class=" differenceList differenceNormal"
        style="margin-top:10px;"
      >
        <div class="listTitle">
          自定义类型（可修改，拖动可排序，优先识别排序高的）
        </div>
        <draggable
          class="syllable_ul"
          element="ul"
          :list="differenceCustomList"
          :options="{animation:150}"
          :no-transition-on-drag="true"
          @end='dataDragEnd'
        >
          <transition-group
            type="transition"
            :css="true"
          >
            <li
              v-for="(item, index) in differenceCustomList"
              :key="item.billtypecode"
              class="expressItem"
              :class="item.isClick?'clickedItem':''"
              @click="clickExpressItem(index,'custom')"
            >
              <span class="labelSpan">{{ item.billtype }}（{{ item.billtypecode }}）</span>
              <span
                class="switchItem"
                @click.stop='stopClickSwitch'
              >
                <i-switch
                  v-model="item.isactive"
                  size="large"
                  @on-change="changeIsActive(item)"
                >
                  <!-- @on-change="changeIsActive(diff)" -->
                  <span slot="open">启用</span>
                  <span slot="close">停用</span>
                </i-switch>
              </span>
            </li>
          </transition-group>
        </draggable>
        <div
          class="addCustomItem"
          @click="addCustomItem"
          v-if='!addIdentificationItemFlag'
          :class='addIdentificationItemFlag?"disabeldClickAdd":""'
        >
          <span>添加类型+</span>
        </div>
        <div
          class="addCustomItem disabeldClickAdd"
          v-else
        >
          <span>添加类型+</span>
        </div>
      </div>
    </div>
    <div class="rightType">
      <div
        v-if="!clickTypeFlag"
        class="emptyMsgBox"
      >
        <img
          :src="finger"
          alt=""
          style="width: 30px;vertical-align: middle;"
        >
        请在左侧选择要查看的财务类型
      </div>
      <div
        v-else
        class="haveClickTypeBox"
      >
        <div class="topTitle" style='display:flex;justify-content:space-between;'>
          <span>
            识别项设置
            <Tooltip
              max-width="400"
              content="如果账单未被任何一个财务类型识别，将自动归为【其他】类型"
              placement="bottom"
            >
              <img
                class="img-framelanflag"
                src="../../assets/icon/help.png"
              >
            </Tooltip>
          </span>
          <span class='topBtnBox'>
            <Button type="fcdefault" size="small" class='topBtn resetBtn' style="height:28px;margin-right:8px;" @click="toReset" v-if='activeTypeItem.isdefault!=1'>还原</Button>
            <Button type="fcdefault" size="small" class='topBtn deleteBtn' style="height:28px;margin-right:8px;" @click="toDelete" v-if='activeTypeItem.isdefault!=1'>删除</Button>
            <Button type="fcdefault" size="small" class='topBtn saveBtn' style="height:28px;"  v-if='activeTypeItem.isdefault!=1' @click="saveAll">保存</Button>
          </span>
        </div>
        <Form
          ref="activeTypeItem"
          :model="activeTypeItem"
          :label-width="70"
          label-position="left"
          style="display: flex;justify-content: space-between;width:100%;margin-top:4px"
        >
          <FormItem
            label="类型名称"
            required
          >
            <Input
              v-model="activeTypeItem.billtype"
              type="text"
              placeholder=""
              style="width:100%"
            />
          </FormItem>
          <FormItem
            label="类型代码"
            required
          >
            <Input
              v-model="activeTypeItem.billtypecode"
              type="text"
              placeholder=""
              style="width:100%"
            />
          </FormItem>
        </Form>
        <div class="identificationList">
          <div
            v-for="(item,index) in activeTypeItem.billParseRullItemsList"
            :key="index"
            class="identificationItem"
          >
            <div
              class="identificationTitle"
              style="margin-bottom: 16px;"
            >
              识别项{{ index+1 }}（识别项的各子条件需要全部满足）
            </div>
            <div class="identificationbillParseRullItemList">
              <div
                v-for="(item1,index1) in item.billParseRullItemList"
                :key="index1"
                class="identificationafterItem"
              >
                <Select
                  v-model="item1.bussinesscode"
                  placeholder="请选择条件"
                  style="margin-right:10px;text-align:left;width:120px; font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #333333;line-height: 17px;"
                >
                  <template v-slot:icon>
                    <Icon type="md-arrow-dropdown" ></Icon>
                  </template>
                  <Option
                    v-for="bussinesscode in bussinesscodeList"
                    :key="bussinesscode.value"
                    :value="bussinesscode.value"
                  >
                    {{ bussinesscode.label }}
                  </Option>
                </Select>
                <Input
                  id="searchkey"
                  v-model="item1.businesstypes"
                  type="text"
                  class='typeInputText'
                  :placeholder="placeholderText"
                  @on-keydown="enterSearch"
                >
                  <Select
                    slot="prepend"
                    v-model="item1.condition"
                    style="text-align:left;width:76px; font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #333333;line-height: 17px;"
                    placeholder=''
                    @on-change="changePlaceholder"
                  >
                    <Option
                      v-for="condition in conditionList"
                      :key="condition.value"
                      :value="condition.value"
                    >
                      {{ condition.label }}
                    </Option>
                  </Select>
                </Input>
                <span class="identificationafterBtnBox">
                  <!-- :class='item.billParseRullItemList.length == 1?"hideAddBtn":""' -->
                  <span v-if='!item1.default'  @click='deleteIdentificationafterItem(index,index1)'><Icon type="ios-remove-circle-outline" style='font-size:20px' /></span>
                  <span v-if='!item1.default' :class='index1 == item.billParseRullItemList.length - 1?"":"hideAddBtn"' @click='addIdentificationafterItem(index,index1)'><Icon type="ios-add-circle-outline" style='font-size:20px' /></span>
                </span>
              </div>
            </div>
          </div>
          <div
            class="addCustomItem"
            v-if='activeTypeItem.isdefault!="1"'
            @click="addIdentificationItem"
          >
            <span>添加识别项+</span>
          </div>
        </div>
      </div>
      <!-- activeTypeItem -->
    </div>
    <Modal
      v-model="showTip"
      mask
      :mask-closable="maskClosable"
      title="警告"
      title-align="left"
      class-name="showTipModel"
      width="600px"
      @on-cancel='cancelClick'
      @on-ok="clickEventType=='add'?addCustomItem('cancelDialog'):clickExpressItem(clickActiveIndex,clickActiveType,'cancelDialog')"
    >
      <p><i class="iconfont iconbj_doubt fcWarning " />当前识别项有内容修改，切换到其他财务类型设置后当前内容将不会保存，确认切换设置？</p>
    </Modal>
    <Spin fix v-if="loading">
      <div class="loader">
        <svg class="circular" viewBox="25 25 50 50">
          <circle
            class="path"
            cx="50"
            cy="50"
            r="20"
            fill="none"
            stroke-width="5"
            stroke-miterlimit="10"
          ></circle>
        </svg>
      </div>
      <div>保存中，请稍后...</div>
    </Spin>
  </div>
</template>


<script>
  import draggable from 'vuedraggable';
  import finger from '../../assets/image/finger.svg';

  const R3 = window.R3;

  const { network } = R3;
  export default {
    props: {
      selectRowData: {// 获取ID用于多选,获取勾选的明细对应的row内的数据
        type: [Array, Object],
        default: () => {}
      }
    },
    components: {
      draggable
    },
    data() {
      return {
        finger,
        loading: false,
        addIdentificationItemFlag: false,
        mask: true,
        closable: true,
        maskClosable: false,
        hideFoot: true,
        showTip: false,
        regx: /^-?\d{0,15}(\.[0-9]{0,4})?$/,
        clickTypeFlag: false, // 是否选择了类型查看
        differenceDefaultList: [],
        differenceCustomList: [],
        activeTypeItem: {}, // 右侧展示的类型详情
        oldActiveTypeItem: {}, // 右侧展示类型详情备份
        bussinesscodeList: [ // 条件类型
          {
            label: '业务类型',
            value: 1
          },
          {
            label: '业务描述',
            value: 2
          },
          {
            label: '备注',
            value: 3
          },
          {
            label: '业务账单来源',
            value: 4
          },
          // {
          //   label: '账号名称',
          //   value: 5
          // },
          {
            label: '对方账号',
            value: 5
          },
          {
            label: '收支方向',
            value: 6
          },
          {
            label: '费用项',
            value: 7
          },
        ],
        conditionList: [
           {
            label: '等于',
            value: 1
          },
          {
            label: '包含',
            value: 2
          },
          {
            label: '不等于',
            value: 3
          },
          {
            label: '不包含',
            value: 4
          },
        ],
        isOrderResolveRulePage: false, // 是不是账单类型解析规则页面
        platformId: '',// 选中行的平台ID
        tradeChannel: -1, // 选中行的交易渠道名称，eg: 支付宝
      };
    },
    created() {
      this.filterParamFn();
      this.getBillParseRullList();
    },
    methods: {
      filterParamFn() {
        this.isOrderResolveRulePage = window.location.href.indexOf('t_v_plt_basisbilltype') > -1;
        const { PLATFORM, TRADINGCHANNEL } = this.selectRowData[0] || {};
        const { refobjid } = PLATFORM || {};
        this.platformId = refobjid;
        const tradeNameMap = {
          '支付宝': '0',
          '微信': '1',
          '微信支付': '1',
        }
        const tradeName = TRADINGCHANNEL.val || null;
        this.tradeChannel = tradeNameMap[tradeName] || -1;
        // console.log(this.selectRowData[0], 'this.selectRowData[0]')
      },
      dataDragEnd() {
        let sortList = [];
        this.differenceCustomList.forEach((item,index) => {
          let obj = {
            billtypeid: item.billtypeid,
            sort: index + 2
          }
          sortList.push(obj)
        })
        let params = {
          sortList
        }
        network.post('/p/cs/sortBillParseRull',params).then(res => {
          if(res.data.code == 0){
            this.$Message.success('更换排序成功！')
            this.getBillParseRullList();
          }
        })
      },
      stopClickSwitch(){
      },
      //判断右侧信息是否被修改
      isChangeMsg() {
        let flag = false;
        if((this.activeTypeItem.billtypecode != this.oldActiveTypeItem.billtypecode) || (this.activeTypeItem.billtype != this.oldActiveTypeItem.billtype)){
          flag = true;
        }else if(this.activeTypeItem.billParseRullItemsList.length != this.oldActiveTypeItem.billParseRullItemsList.length){
          flag = true;
        }else if(this.activeTypeItem.billParseRullItemsList.length == this.oldActiveTypeItem.billParseRullItemsList.length){
          this.activeTypeItem.billParseRullItemsList.forEach((item,index) => {
            if(item.billParseRullItemList.length != this.oldActiveTypeItem.billParseRullItemsList[index].billParseRullItemList.length){
              flag = true;
            }else {
              item.billParseRullItemList.forEach((item1,index1)=> {
                if((item1.bussinesscode != this.oldActiveTypeItem.billParseRullItemsList[index].billParseRullItemList[index1].bussinesscode) || (item1.condition != this.oldActiveTypeItem.billParseRullItemsList[index].billParseRullItemList[index1].condition) || (item1.businesstypes != this.oldActiveTypeItem.billParseRullItemsList[index].billParseRullItemList[index1].businesstypes)){
                  flag = true;
                }
              })
            }
          })
        }
        if(flag){
          this.showTip = true;
          return false;
        }else{
          return true;
        }
      },
      // 仅判断是否修改信息
      isChangeMsgNew() {
        let flag = false;
        if((this.activeTypeItem.billtypecode != this.oldActiveTypeItem.billtypecode) || (this.activeTypeItem.billtype != this.oldActiveTypeItem.billtype)){
          flag = true;
        }else if(this.activeTypeItem.billParseRullItemsList.length != this.oldActiveTypeItem.billParseRullItemsList.length){
          flag = true;
        }else if(this.activeTypeItem.billParseRullItemsList.length == this.oldActiveTypeItem.billParseRullItemsList.length){
          this.activeTypeItem.billParseRullItemsList.forEach((item,index) => {
            if(item.billParseRullItemList.length != this.oldActiveTypeItem.billParseRullItemsList[index].billParseRullItemList.length){
              flag = true;
            }else {
              item.billParseRullItemList.forEach((item1,index1)=> {
                if((item1.bussinesscode != this.oldActiveTypeItem.billParseRullItemsList[index].billParseRullItemList[index1].bussinesscode) || (item1.condition != this.oldActiveTypeItem.billParseRullItemsList[index].billParseRullItemList[index1].condition) || (item1.businesstypes != this.oldActiveTypeItem.billParseRullItemsList[index].billParseRullItemList[index1].businesstypes)){
                  flag = true;
                }
              })
            }
          })
        }
        if(flag){
          return false;
        }else{
          return true;
        }
      },
      // 获取类型列表数据
      getBillParseRullList() {
        let url = '/p/cs/billParseRullList';
        const reqParam = {};
        if(this.isOrderResolveRulePage){
          url = `/p/cs/billParseRullList/${this.platformId}/${this.tradeChannel}`;
        }
        network.post(url, reqParam).then(res => {
          if (res.data.code == 0) {
            res.data.data.defaultList.forEach(item => {
              item.isactive = item.isactive == 'Y'?true:false
              item.billParseRullItemsList.forEach(item1 => {
                item1.billParseRullItemList.forEach(item2 => {
                  item2.bussinesscode = Number(item2.bussinesscode) + 1
                  item2.condition = Number(item2.condition)  + 1
                  item2.default = true;
                })
              })
            })
            res.data.data.customizeList.forEach(item => {
              item.isactive = item.isactive == 'Y'?true:false
              item.billParseRullItemsList.forEach(item1 => {
                item1.billParseRullItemList.forEach(item2 => {
                  item2.bussinesscode = Number(item2.bussinesscode)  + 1
                  item2.condition = Number(item2.condition)  + 1
                  item2.default = false;
                })
              })
            })
            this.differenceDefaultList = res.data.data.defaultList
            this.differenceCustomList = res.data.data.customizeList
            if(this.clickTypeFlag){
              this.differenceCustomList.forEach(item => {
                item.isClick = false;
                if(item.billtypecode == this.activeTypeItem.billtypecode){
                  item.isClick = true;
                  this.activeTypeItem.billtypeid = item.billtypeid
                }
              });
              this.differenceDefaultList.forEach(item => {
                item.isClick = false;
                if(item.billtypecode == this.activeTypeItem.billtypecode){
                  item.isClick = true;
                  this.activeTypeItem.billtypeid = item.billtypeid
                }
              });
            }
          }
        });
      },
      cancelClick() {
      },
      // 判断是否新增类型中添加了内容
      isAddText(item) {
        let flag = false;
        try{
          item.billParseRullItemsList.forEach(item=> {
            try{
              item.billParseRullItemList.forEach(item => {
                if(item.businesstypes != '' || item.bussinesscode || item.condition != 1){
                  flag = true
                  throw new Error
                }
              })
            }catch {}
          })
        }catch{}
        if(item.billtype=='' && item.billtypecode == '' && !flag){
          return false;
        }else {
          return true;
        }

      },
      // 点击类型
      clickExpressItem(index, type, typeOne) {
        // this.addIdentificationItemFlag = false;
        let flag = false
        let flagOne = false  // 新增类型中有没有填充
        if(typeOne == 'cancelDialog' || !this.clickTypeFlag){
          this.addIdentificationItemFlag = false;
          flag = true
        }else {
          this.clickEventType = 'change';
          if(this.addIdentificationItemFlag){
            flagOne = this.isAddText(this.activeTypeItem)
            if(flagOne) {
              flag = this.isChangeMsg();
            }else {
              flag = true
              this.addIdentificationItemFlag = false;
            }
          }else {
            flag = this.isChangeMsg();
          }
          this.clickActiveIndex = index;
          this.clickActiveType = type;
        }
        if(!flag){

        }else {
          if (type == 'default') {
            this.differenceCustomList.forEach(item => {
              item.isClick = false;
            });
            this.differenceDefaultList.forEach((item, index1) => {
              if (index1 != index) {
                item.isClick = false;
              } else {
                item.isClick = true;
              }
            });
            this.clickTypeFlag = true;
            this.differenceDefaultList = JSON.parse(JSON.stringify(this.differenceDefaultList));
            this.activeTypeItem = JSON.parse(JSON.stringify(this.differenceDefaultList[index]));
            this.oldActiveTypeItem = JSON.parse(JSON.stringify(this.activeTypeItem))
          } else {
            this.differenceDefaultList.forEach(item => {
              item.isClick = false;
            });
            this.differenceCustomList.forEach((item, index1) => {
              if (index1 != index) {
                item.isClick = false;
              } else {
                item.isClick = true;
              }
            });
            this.clickTypeFlag = true;
            this.differenceCustomList = JSON.parse(JSON.stringify(this.differenceCustomList));
            this.activeTypeItem = JSON.parse(JSON.stringify(this.differenceCustomList[index]));
            this.oldActiveTypeItem = JSON.parse(JSON.stringify(this.activeTypeItem))
          }
        }
      },
      // 类型停启用
      changeIsActive(item) { // /p/cs/activeDifferences
        let billParseRullItemsList = JSON.parse(JSON.stringify(item.billParseRullItemsList))
        billParseRullItemsList.forEach(item1 => {
          item1.billParseRullItemList.forEach(item2 => {
            item2.bussinesscode = Number(item2.bussinesscode)  - 1
            item2.condition = Number(item2.condition)  - 1
          })
        })
        let params = {
          billtypeid: item.billtypeid,
          isactive: item.isactive ? 'Y' : 'N',
          billParseRullItemsList: billParseRullItemsList,
          billtype: item.billtype,
          billtypecode: item.billtypecode,
          // sort: 0
        }
        const url = `/p/cs/saveBillParseRull/${this.platformId}/${this.tradeChannel}`;
        network.post(url, params).then(res => {
          if (res.data.code == 0) {
            if (item.isactive) {
              this.$Message.success('该类型启用成功');
            } else {
              this.$Message.success('该类型停用成功');
            }
            this.getBillParseRullList();
            // this.differenceCustomList = JSON.parse(JSON.stringify(this.differenceCustomList))
          }
        });
      },
      // 添加类型
      addCustomItem(typeOne) {
        let flag = false
        if(typeOne == 'cancelDialog' || !this.clickTypeFlag){
          this.addIdentificationItemFlag = true;
          flag = true
          this.differenceCustomList.forEach(item => {
            item.isClick = false;
          });
          this.differenceDefaultList.forEach(item => {
            item.isClick = false;
          });
        }else {
          this.clickEventType = 'add';
          flag = this.isChangeMsg();
          if(flag){
            this.differenceCustomList.forEach(item => {
              item.isClick = false;
            });
            this.differenceDefaultList.forEach(item => {
              item.isClick = false;
            });
            this.addIdentificationItemFlag = true;
          }
        }
        if(!flag){

        }else {
          this.clickTypeFlag = true;
          this.activeTypeItem = {
            isDefault: false,
            billtype: '',
            billtypecode: '',
            billParseRullItemsList: [
              {
                billParseRullItemList: [
                  {
                    bussinesscode: '',
                    condition: 1,
                    businesstypes: '',
                  }
                ]
              }
            ]
          };
          this.oldActiveTypeItem = JSON.parse(JSON.stringify(this.activeTypeItem))
        }
      },
      // 添加识别项
      addIdentificationItem() {
        let obj = {
          billParseRullItemList: [
            {
              bussinesscode: '',
              condition: 1,
              businesstypes: '',
            }
          ]
        }
        this.activeTypeItem.billParseRullItemsList.push(obj);
      },
      //识别项中添加子项
      addIdentificationafterItem(index,index1) {
        let obj = {
          bussinesscode: '',
          condition: 1,
          businesstypes: '',
        }
        this.activeTypeItem.billParseRullItemsList[index].billParseRullItemList.splice(index1+1,0,obj);
      },
      //识别项中删除子项
      deleteIdentificationafterItem (index,index1) {
        if(this.activeTypeItem.billParseRullItemsList[index].billParseRullItemList.length == 1){
          this.activeTypeItem.billParseRullItemsList.splice(index,1)
        }else {
          this.activeTypeItem.billParseRullItemsList[index].billParseRullItemList.splice(index1,1);
        }
      },
      // 还原类型
      toReset() {
        this.$Modal.fcWarning({
          title: '提示',
          mask: true,
          showCancel: true,
          content: '还原后此次此次做的所有修改都将重置为原来的设置，是否确认？',
          onOk:()=>{
            this.activeTypeItem = JSON.parse(JSON.stringify(this.oldActiveTypeItem))
          }
        });
      },
      //  删除类型
      toDelete() {
        this.$Modal.fcWarning({
          title: '提示',
          mask: true,
          showCancel: true,
          content: '删除后不可恢复，确定删除？',
          onOk:()=>{
            if(this.activeTypeItem.id){

            }else {
              let params = {
                billtypeid: this.activeTypeItem.billtypeid
              }
              let url = '/p/cs/deleteBillParseRull';
              if(window.location.href.indexOf('t_v_plt_basisbilltype') > -1){
                url = '/p/cs/deleteBillParseRull/'+this.selectRowData[0].PLATFORM.refobjid
              }
              network.post(url,params).then(res => {
                if(res.data.code == 0){
                  this.$Message.success('类型删除成功')
                  this.activeTypeItem = {}
                  this.clickTypeFlag = false;
                  this.getBillParseRullList();
                }
              })
            }
          }
        });
      },
      // 保存账单解析类型
      saveAll() {
        let flagOne = this.isChangeMsgNew();
        if(flagOne){
          return this.$Message.warning('无内容修改');
        }
        let flag = true;
        if(this.activeTypeItem.billtype == ''){
          this.$Message.warning('类型名称不能为空')
          return
        }
        if(this.activeTypeItem.billtypecode == ''){
          this.$Message.warning('类型代码不能为空')
          return
        }
        if(this.activeTypeItem.billParseRullItemsList.length == 0 || !this.activeTypeItem.billParseRullItemsList){
          this.$Message.warning('类型需设置识别项')
          return
        }
        let billParseRullItemsList = JSON.parse(JSON.stringify(this.activeTypeItem.billParseRullItemsList))
        try{
          billParseRullItemsList.forEach((item1,index1) => {
            try{
              item1.billParseRullItemList.forEach((item2,index2) => {
                if(item2.bussinesscode == '' || item2.condition == '' || item2.businesstypes == ''){
                  flag = false
                  this.$Message.warning('识别项'+(index1+1)+'的子条件'+(index2+1)+'条件不能为空')
                  throw new Error
                }
                item2.bussinesscode = Number(item2.bussinesscode)  - 1
                item2.condition = Number(item2.condition)  - 1
              })
            }catch{}
          })
        }catch{}
        if(!flagOne&&flag){
          this.loading = true;
          let params = {
            billtypeid: this.activeTypeItem.billtypeid,
            // isactive: this.activeTypeItem.isactive ? 'Y' : 'N',
            billParseRullItemsList: billParseRullItemsList,
            billtype: this.activeTypeItem.billtype,
            billtypecode: this.activeTypeItem.billtypecode,
            // sort: 0
          }
          if(!this.activeTypeItem.billtypeid){
            params.sort=this.differenceCustomList.length + 2;
            params.isactive = this.activeTypeItem.isactive ? 'Y' : 'N';
          }
          let url = '/p/cs/saveBillParseRull'
          if(this.isOrderResolveRulePage){
            url = `/p/cs/saveBillParseRull/${this.platformId}/${this.tradeChannel}`;
          }
          network.post(url, params).then(res => {
            if (res.data.code == 0) {
              this.$Message.success('保存成功');
              this.loading = false;
              // this.clickTypeFlag = false;
              // this.activeTypeItem = {};
              this.oldActiveTypeItem = JSON.parse(JSON.stringify(this.activeTypeItem)) // 重新赋值oldActiveTypeItem
              this.getBillParseRullList();
              if(this.addIdentificationItemFlag){
                this.addIdentificationItemFlag = false;
              }
            }else {
              this.loading = false;
            }
          });
        }
      }
    }
  };
</script>
<style lang='less'>
 .diffSetting .ark-input-group-prepend, .diffrenceReason .ark-input-group-append {
   background: #fff;
   border-right: none;
   span {
     color: #aaa;
   }
 }
 .diffSetting .ark-input-group .ark-input {
  //  border-left: none;
  //  outline:none;
 }
 .differenceTop .ark-switch-disabled .ark-switch-inner {
    color: #fff;
  }
  .changeDIFFERENCE .ark-input {
    height: 32px;
    line-height: 32px;
  }
  .identificationafterItem .ark-input-group-with-prepend .ark-input-group-prepend {
    background-color: #fff;
  }
  .identificationafterItem .ark-select-disabled+.ark-input-group-with-prepend .ark-input-group-prepend {
    background-color: #f4f4f4;
  }
  .typeInputText.ark-input-group {
    width: 280px;
  }
  .typeInputText .ark-input {
    width: 200px;
  }
</style>

<style scoped lang='less'>
  .differenceTop .ark-switch-disabled {
    background: var(--primary-color);
    border-color: var(--primary-color);
  }
  .differenceTop .ark-switch-disabled:after {
    background: #fff;
  }
  .diffrenceReason {
    display: flex;
    width: 900px;
    height: 500px;
    overflow-y: auto;
    padding: 0 10px;
    .topTitle {
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #ccc;
      padding-bottom: 12px;
      padding-top: 8px;
      height: 42px;
      img {
        width: 20px;
        height: 20px;
        margin-left: 4px;
        vertical-align: middle;
      }
      .opareBtn {
        width: 60px;
        height: 40px;
        border: 1px solid #eee;
      }
    }
    .differenceList {
      .listTitle {
        color: #777;
        margin: 12px 0px;
      }
      .differentItem {
        padding: 16px;
        margin-bottom: 16px;
        min-height: 100px;
        box-shadow: 2px 2px 8px 0px #c1c1c1;
        .differenceTop {
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          position: relative;
          .differenceName {
            max-width: 300px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            font-size: 14px;
            font-weight: 600;
            margin: 0 10px;
          }
          .diffType {
            padding: 2px;
            border: 1px solid rgb(214, 12, 12);
            color: rgb(214, 12, 12);
          }
          .setIcon {
            position: absolute;
            right: 0px;
          }
        }
        .differentDesc {
          line-height: 16px;
        }
      }
    }
  }
  .bottomBtnBox {
      width: calc(100% + 32px);
      margin: 16px auto 0px;
      margin-left: -16px;
      text-align: center;
      border-top: 1px solid #DEDEDE;
      padding-top: 16px;
      .cancelBtn, .sureBtn {
        width: 72px;
        height: 32px;
        font-size: 12px;
      }
      .cancelBtn {
        color: #909399;
        border: 1px solid #DADADA;
        margin-right: 8px;
      }
    }

  .expressItem {
    position: relative;
    width: 370px;
    border: 1px solid rgb(221, 211, 211);
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-bottom: 10px;
    font-size: 14px;
    cursor: pointer;
  }
  .expressItem:hover {
    background-color: #f1f1f1;
  }
  .switchItem {
    position: absolute;
    right: 10px;
    top: -2px;
    .ark-switch-checked {
      border-color: #68c41a;
      background-color: #68c41a;
    }
    .ark-switch:focus {
      box-shadow: 0 0 0 2px rgba(104,196,26,0.2)
    }
  }
  .switchItem.defaultItem {
    width: 56px;
    height: 22px;
    line-height: 22px;
    border-radius: 22px;
    background-color: #68c41a;
    top: 10px;
    color: #fff;
    font-size: 12px;
  }
  .expressItem.clickedItem {
    background: rgb(15, 142, 233);
    color: #fff;
  }
  .addCustomItem {
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    border: 1px solid rgb(221, 211, 211);
    // margin-bottom: 16px;
  }
  .addCustomItem.disabeldClickAdd {
    cursor: not-allowed;
    background: #f1f1f1;
  }
  .leftType {
    width:400px;
    max-height: 490px;
    overflow-y: auto;
  }
  .rightType {
    width: 500px;
    max-height: 490px;
    overflow-y: auto;
    margin-left: 18px;
    padding-right: 8px;
    .emptyMsgBox {
      display: flex;
      width: 400px;
      height: 180px;
      align-items: center;
      justify-content: center;
    }
    .ark-form-item {
      margin-bottom: 12px;
    }
    .identificationList {
      padding-bottom: 10px;
    }
    .identificationItem {
      width: 100%;
      border: 1px solid rgb(221, 211, 211);
      padding: 16px 10px;
      margin-bottom: 10px;
    }
    .identificationafterItem {
      display: flex;
      margin-bottom: 10px;
    }
    .identificationafterBtnBox {
      display: flex;
      align-items: center;
      // margin-left: -20px;
      z-index: 6;
      span:first-child {
        margin-right: 4px;
      }
      .hideAddBtn {
        visibility: hidden;
      }
    }
    .topBtnBox {
      .topBtn {
        border: 1px solid #bbb;
        color: #bbb;
      }
      .topBtn.saveBtn {
        border: 1px solid #419c09;
        background-color: #419c09;
        color: #fff;
      }
      .topBtn.resetBtn:hover {
        border: 1px solid var(--primary-color);
        background-color: var(--primary-color);
        color: #fff;
      }
      .topBtn.deleteBtn:hover {
        border: 1px solid red;
        background-color: red;
        color: #fff;
      }
    }
  }

</style>
