<template>
  <div
    class="diffrenceReason"
  >
    <div class="topTitle">
      已有差异类型
      <Tooltip
        max-width="500"
        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">
        <div
          v-for="(diff,index) in differenceDefaultList"
          :key="index"
          class="differentItem"
        >
          <div class="differenceTop">
            <i-switch v-model="diff.ISACTIVE" disabled>
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-switch>
            <span class="differenceName">{{ diff.DIFFERENCENAME }}</span>
            <span class="diffType">{{ diff.DIFFERENCETYPE==0?'真差异':'假差异' }}</span>
          </div>
          <div class="differentDesc">
            {{ diff.DIFFERENCEDESC }}
          </div>
        </div>
      </div> 
    </div>
    <div class=" differenceList differenceNormal">
      <div class="listTitle">
        常规差异类型
      </div>
      <div class="listContent">
        <div
          v-for="(diff,index) in differenceNormalList"
          :key="index"
          class="differentItem"
        >
          <div class="differenceTop">
            <i-switch v-model="diff.ISACTIVE"  @on-change="changeIsActive(diff)" >
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-switch>
            <span class="differenceName">{{ diff.DIFFERENCENAME }}</span>
            <span class="diffType">{{ diff.DIFFERENCETYPE==0?'真差异':'假差异' }}</span>
            <span
              class="setIcon"
              @click="setDiffDetail(diff)"
            >
              <Icon
                style="font-size: 24px;color: rgb(15, 142, 233);"
                type="ios-settings-outline"
              />
            </span>
          </div>
          <div class="differentDesc">
            {{ diff.DIFFERENCEDESC }}
          </div>
        </div>
      </div> 
    </div>
    <Modal
      v-model="settingShow"
      :title="settingTitle"
      title-align="left"
      width="450"
      class-name='diffSetting'
      :closable="closable"
      :mask="mask"
      :mask-closable="maskClosable"
      :footer-hide="hideFoot"
      @on-cancel="closeChooseStoreDialog"
    >
      <div class="chooseStorageForm changeDIFFERENCE">
        <Form
          ref="formValidate"
          :model="diffForm"
          :label-width="90"
          class="chooseStorageBox"
        >
          <FormItem
            label="金额差异范围"
          >
            <div style='display: flex;'>
              <Input
              style = 'width: 120px;height: 32px;'
              placeholder=""
              v-model="diffForm.DIFFERENCESOFFLINE"
              @on-blur = 'changeDIFFERENCESOFFLINE'
              :regx="regx"
            >
            <!-- <span slot="prepend">负</span> -->
            </Input>
            <span style='background: #eee;display: inline-block;width: 30px;height:32px;line-height: 32px;text-align: center;'>至</span>
            <Input
              style = 'width: 120px;height: 32px;'
              placeholder=""
              v-model="diffForm.DIFFERENCESUPPER"
              @on-blur = 'changeDIFFERENCESUPPER'
              :regx="regx"
            >
            <!-- <span slot="prepend">正</span> -->
            </Input>
            </div>
          </FormItem>
        </Form>
      </div>
      <div class="bottomBtnBox">
        <Button
          size="small"
          class="cancelBtn"
          ghost
          @click="cancel()"
        >
          取消
        </Button>
        <Button
          type="primary"
          size="small"
          class="sureBtn"
          @click="sureChangeDiff"
        >
          确定
        </Button>
      </div>
    </Modal>
  </div>
</template>


<script>
  const R3 = window.R3;

  const { network } = R3;
  export default {
    props: {
      selectRowData: {// 获取ID用于多选,获取勾选的明细对应的row内的数据
        type: [Array, Object],
        default: () => {}
      }
    },
    data() {
      return {
        settingTitle: '',
        settingShow: false,
        mask: true,
        closable: true,
        maskClosable: false,
        hideFoot: true,
        regx: /^-?\d{0,15}(\.[0-9]{0,4})?$/,
        
        diffForm: {
          id: '',
          DIFFERENCESOFFLINE: '',
          DIFFERENCESUPPER: ''
        },
        differenceDefaultList: [
          // {
          //   ID: 1,
          //   ISACTIVE: true,
          //   DIFFERENCETYPE: 0,
          //   DIFFERENCESUPPER: 0.1,
          //   DIFFERENCESOFFLINE: 0.05,
          //   DIFFERENCENAME: '未知差异',
          //   DIFFERENCEDESC: '差异说明：此差异为真差异，不可编辑。此差异为真差异，不可编辑。此差异为真差异，不可编辑。此差异为真差异，不可编辑。',
          // },
        ],
        differenceNormalList: [
          // {
          //   ID: 2,
          //   ISACTIVE: false,
          //   DIFFERENCETYPE: 1,
          //   DIFFERENCESUPPER: 0.1,
          //   DIFFERENCESOFFLINE: 0.05,
          //   DIFFERENCENAME: '小差异',
          //   DIFFERENCEDESC: '差异说明：此差异为小差异，不可编辑。此差异为小差异，不可编辑。此差异为真差异，不可编辑。此差异为真差异，不可编辑',
          // },
        ]
      };
    },
    created() {
      this.getDifferencesn();
    },
    methods: {
      changeDIFFERENCESOFFLINE(val) {
        this.diffForm.DIFFERENCESOFFLINE = !val.target.value?"0":val.target.value
      },
      changeDIFFERENCESUPPER(val) {
        this.diffForm.DIFFERENCESUPPER = !val.target.value?"0":val.target.value
      },
      // /p/c/getDifferencesn
      getDifferencesn() {
        let params = {
          DIFFERENCETYPE: ['0','1']
        }
        network.post('/p/c/getDifferencesn', params).then(res => {
          if(res.data.code == 0){
            let defaultList = [];
            let normalList = [];
            res.data.data.forEach(item => {
              item.ISACTIVE = item.isactive=='Y'?true:false;
              if(item.ISDEFAULT == 0){
                defaultList.push(item)
              }else if(item.ISDEFAULT == 1){
                normalList.push(item)
              }
            })
            this.differenceDefaultList = defaultList;
            this.differenceNormalList = normalList;
          }
        });
      },
      setDiffDetail(diff) {
        this.diffForm.id = diff.ID;
        this.settingTitle = diff.DIFFERENCENAME;
        this.settingShow = true;
        this.diffForm.DIFFERENCESOFFLINE = diff.DIFFERENCESOFFLINE;
        this.diffForm.DIFFERENCESUPPER = diff.DIFFERENCESUPPER;
      },
      cancel() {
        this.settingShow = false;
      },
      sureChangeDiff() {
        this.diffForm.DIFFERENCESUPPER = this.diffForm.DIFFERENCESUPPER?this.diffForm.DIFFERENCESUPPER:'0';
        this.diffForm.DIFFERENCESOFFLINE = this.diffForm.DIFFERENCESOFFLINE?this.diffForm.DIFFERENCESOFFLINE:'0';
        let params = this.diffForm;
        network.post('/p/cs/updateDifferences',params).then(res => {
          if(res.data.code == 0){
            this.settingShow = false;
            this.getDifferencesn();  // 重新加载差异类型列表
            this.$Message.success('该差异类型修改成功');
          }else{
            this.$Message.error(res.data.msg);
          }
        })
      },
      changeIsActive(diff) { // /p/cs/activeDifferences
        let ativeDifferencesList = [
          {
            id: diff.ID,
            activeType: diff.ISACTIVE ? 'Y' : 'N'
          }
        ];
        let params = {
          ativeDifferencesList
        };
        network.post('/p/cs/activeDifferences', params).then(res => {
          if (res.data.code == 0) {
            if (diff.ISACTIVE) {
              this.$Message.info('该差异类型开启成功');
            } else {
              this.$Message.info('该差异类型关闭成功');
            }
          }
        });
      }
    }
  };
</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;
  }
</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 {
    width: 600px;
    max-height: 450px;
    overflow-y: auto;
    padding: 0 40px;
    .topTitle {
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #ccc;
      padding-bottom: 12px;
      img {
        width: 20px;
        height: 20px;
        margin-left: 4px;
        vertical-align: middle;
      }
    }
    .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;
      }
    }
</style>
