<template>
  <dialogBox title="申请业务规则配置" @submitForm="submitForm" @closeDialog="closeDialog" v-model="myValue"
    :btnDisabled="btnDisabled">
    <ul class="edit-title-list" v-if="titleList.length > 0">
      <li v-for="(item, index) in titleList" @click="handleTitleSelct(item, index)" :key="index"
        :class="{ active: index == tn }">{{
        item.nodename
        }}</li>
    </ul>
    <div class="sqywgz-edit">
      <ul class="sqywgz-edit-left">
        <li v-for="(item, index) in leftList" :key="index" :class="{ active: index == n }" @click="hanldeItem(index)">{{
        item.name
        }}</li>
      </ul>
      <div class="sqywgz-edit-right">
        <el-form :model="ruleForm" v-show="n == 0" :rules="rules" label-width="135px" ref="ruleForm">
          <el-row>
            <el-col :span="8">
              <el-form-item label="权利类型编码">
                <el-input v-model="ruleForm.qllxbm" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="权利类型名称">
                <el-input v-model="ruleForm.qllxmc" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请分类">
                <el-select v-model="ruleForm.sqfl" disabled placeholder="请选择" class="width100">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="登记类型编码">
                <el-input v-model="ruleForm.djlxbm" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登记类型名称">
                <el-input v-model="ruleForm.djlxmc" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发起业务单元类型">
                <el-select v-model="ruleForm.fqywdylx" disabled placeholder="请选择" class="width100">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="登记业务编码">
                <el-input v-model="ruleForm.djywbm" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="登记业务名称">
                <el-input v-model="ruleForm.djywmc" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否启用" prop="enabled">
                <el-radio-group v-model="ruleForm.enabled">
                  <el-radio label="1">启用</el-radio>
                  <el-radio label="0">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="业务流程ID" prop="flowid">
                <el-input v-model="ruleForm.flowid"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="登记情形及材料">
                <el-input v-model="ruleForm.djqxcl" placeholder="仅支持execl文件导入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-upload ref="upload" :action="imgUploadUrl" :limit="1" accept=".xls, .xlsx" :show-file-list="false"
                :disabled='requested' :file-list="fileList" :before-upload="uploadRecord" :on-success="handleSuccess">
                <el-button type="primary" icon="el-icon-upload" :loading="requested">上传材料</el-button>
              </el-upload>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="登记原因设置" prop="sfqydjyymb">
                <el-radio-group v-model="ruleForm.sfqydjyymb">
                  <el-radio label="1">启用</el-radio>
                  <el-radio label="0">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="登记原因模板" prop="djyy">
                <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="ruleForm.djyy">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <djqxsd v-show="n == 1" :ruleForm="ruleForm" :djqx="subData.djqx" @updateValue="getDjqxValue" />
        <clgzsd v-show="n == 2" :ruleForm="ruleForm" :clzt="subData.clxx" :djqx="subData.djqx"
          @updateValue="getClgzValue" />
        <dyztsd :ruleForm="ruleForm" :subData="subData" v-show="n == 3" @updateValue="getDyztsdValue" />
      </div>
    </div>
  </dialogBox>
</template>

<script>
import fileController from '@/api/fileController'
import djqxsd from './djqxsd.vue'
import clgzsd from './clgzsd.vue'
import dyztsd from './dyztsd.vue'
import { getSqdjywDetail, saveSqdjyw } from '@/api/system'
export default {
  components: {
    djqxsd,
    clgzsd,
    dyztsd
  },
  props: {
    value: { type: Boolean, default: false },
    detailList: {
      type: Array, default: []
    },
    bsmSqyw: {
      type: String, default: ''
    },
  },
  watch: {
    value (val) {
      this.myValue = val
    },
    detailList: {
      handler: function (newValue) {
        if (newValue.length == 0) {
          this.getSqdjywDetail(this.bsmSqyw)
        } else {
          this.titleList = newValue
          this.n = 0
          this.tn = 0
          this.getSqdjywDetail(newValue[0].bsmSqyw)
        }
      },
      deep: true
    }
  },
  data () {
    return {
      djqx: [],
      clzt: [],
      myValue: this.value,
      btnDisabled: false,
      tn: 0,
      titleList: [],
      imgUploadUrl: fileController.uploadUrl(),
      n: 0,
      leftList: [
        {
          name: '业务详情',
          select: true
        },
        {
          name: '登记情形设定'
        },
        {
          name: '材料规则设定'
        },
        {
          name: '单元状态设定'
        }
      ],
      ruleForm: {
        qllxbm: '',
        qllxmc: '',
        sqfl: '',
        djlxbm: '',
        djlxmc: '',
        fqywdylx: '',
        djywbm: '',
        djywmc: '',
        enabled: '1',
        flowid: '',
        djqxcl: '',
        sfqydjyymb: '1',
        djyy: ''
      },
      requested: false,
      fileList: [],
      options: [],
      rules: {
        sfqy: [
          { required: true, message: '请选择是否启用', trigger: 'change' },
        ],
        ywlc: [
          { required: true, message: '请输入业务流程ID', trigger: 'blur' },
        ],
        djqxcl: [
          { required: true, message: '请选择登记情形及材料', trigger: 'blur' },
        ],
        djyysz: [
          { required: true, message: '请选择登记原因设置', trigger: 'change' },
        ],
        djyymb: [
          { required: true, message: '请输入登记原因模板', trigger: 'blur' },
        ],
      },
      // 表单提交
      subData: {}
    };
  },
  methods: {
    getSqdjywDetail (bsmSqyw) {
      getSqdjywDetail(bsmSqyw).then(res => {
        this.subData = res.result
        let { ywDetail } = res.result
        this.ruleForm = ywDetail
      })
    },
    handleTitleSelct (obj, index) {
      this.n = 0
      this.tn = index
      this.getSqdjywDetail(obj.bsmSqyw)
    },
    getDjqxValue (val) {
      if (!_.isEqual(val.djqx, this.subData.djqx)) {
        this.subData.djqx = val.djqx
        this.btnDisabled = val.btnDisabled
      }
    },
    getClgzValue (val) {
      if (!_.isEqual(val, this.subData.clxx)) {
        this.subData.clxx = val
      }
    },
    // 单元状态设定
    getDyztsdValue (val) {
      if (!_.isEqual(val.sxql, this.subData.sxql)) {
        this.subData.sxql = val.sxql
      }
      if (!_.isEqual(val.sxzt, this.subData.sxzt)) {
        this.subData.sxzt = val.sxzt
      }
    },
    submitForm () {
      this.$refs['ruleForm'].validate(async (valid) => {
        let that = this
        if (valid) {
          this.subData.ywDetail = this.ruleForm
          saveSqdjyw(this.subData).then(res => {
            if (res.code == 200) {
              that.$message({
                message: '修改成功',
                type: 'success'
              })
              // that.$emit('input', false)
            }
          })
        } else {
          this.$message('请检查表单完整性')
          return false
        }
      })
    },
    closeDialog () {
      this.$emit('input', false)
    },
    hanldeItem (index) {
      this.n = index
    },
    uploadRecord (file) {
      this.requested = true
      this.files = file;
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!extension && !extension2) {
        this.$message.warning('上传模板只能是 xls、xlsx格式!')
        this.requested = false
      }
      if (!isLt5M) {
        this.$message.warning('上传模板大小不能超过 5MB!')
        this.requested = false
      }
      return (extension || extension2) && isLt5M
    },
    handleSuccess (res) {
      if (res.code === 200) {
        this.requested = false
        this.$message({
          message: '上传成功',
          type: 'success',
        })
      } else {
        this.loading = false
        this.$message.error(res.message)
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";

/deep/.el-radio {
  margin-right: 8px;
}

/deep/.el-radio__label {
  padding-left: 2px;
}

.active {
  background: $light-blue !important;
  color: #fff;
}

.edit-title-list {
  @include flex;

  li {
    flex: 1;
    @include flex-center;
    border: 1px solid $borderColor;
    line-height: 36px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      @extend .active;
    }
  }
}

.sqywgz-edit {
  @include flex;
  width: 100%;
  height: 563px;

  &-left {
    width: 26px;



    li {
      @include flex-center;
      background-color: #E4E7ED;
      border-bottom-right-radius: 5px;
      padding: 15px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        @extend .active;
      }
    }

    li:not(:last-child) {
      margin-bottom: 10px;
    }
  }

  &-right {
    margin-left: 20px;
    flex: 1;
    width: 100%;
  }
}
</style>