<template>
  <el-dialog :title="sqqlRule.nodename" custom-class="dialogBox contentCenter" width="80%" top="0"
    :visible.sync="dialogVisible" :before-close="cancelDialog">
    <ul class="edit-title-list" v-if="djlxList.length > 0">
      <li v-for="(item, index) in djlxList" @click="handleTitleSelct(item, index)" :key="index"
        :class="{ active: index == tn }">
        {{ item.nodename }}
      </li>
    </ul>
    <div class="contentBox">
      <el-form :model="form" v-show="n == 0" label-width="135px" ref="ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="申请分类">
              <el-select v-model="form.ywDetail.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-col :span="8">
            <el-form-item label="登记业务编码">
              <el-input v-model="form.ywDetail.djywbm" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记业务名称">
              <el-input v-model="form.ywDetail.djywmc" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发起业务单元类型">
              <el-select v-model="form.ywDetail.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-col :span="8">
            <el-form-item label="是否启用" prop="enabled">
              <el-radio-group v-model="form.ywDetail.enabled">
                <el-radio label="1">启用</el-radio>
                <el-radio label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务流程ID" prop="flowid">
              <el-input v-model="form.ywDetail.flowid"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="登记原因设置" prop="sfqydjyymb">
              <el-radio-group v-model="form.ywDetail.sfqydjyymb">
                <el-radio label="1">启用</el-radio>
                <el-radio label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记情形及材料">
              <el-input v-model="form.ywDetail.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="24">
            <el-form-item label="登记原因模板" prop="djyy">
              <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.ywDetail.djyy">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-collapse accordion>
        <el-collapse-item title="登记情形设置" name="1">
          <lb-table :column="djqxCol" border :pagination="false" heightNumSetting :data="form.djqx">
          </lb-table>
        </el-collapse-item>
        <el-collapse-item title="材料信息设置" name="2">
          <lb-table :column="clxxCol" border heightNumSetting :pagination="false" :data="form.clxx">
          </lb-table>
        </el-collapse-item>
        <el-collapse-item title="刷选权利设置" name="3" v-if="form.ywDetail.sfsxql == '1'">
          <div class="dyztsd-title">
            <b>请勾选需要查询的权利信息</b>
            <div>
              <el-button type="text" @click="handleSelectall">选择全部 </el-button>
              <el-button type="text" @click="handleInvert">清除全部</el-button>
            </div>
          </div>
          <el-divider></el-divider>
          <ul class="qlxx-list">
            <li v-for="(item, index) in form.sxql" :key="index">
              <el-checkbox v-model="item.checked">{{ item.sxzdmc }}</el-checkbox>
            </li>
          </ul>
        </el-collapse-item>
        <el-collapse-item title="办理状态设置" name="4">
          <ul class="screen-list">
            <li v-for="(item, index) in form.sxzt" :key="index">
              <div class="screen-list-left">
                {{ item.sxzdmc }} ：
                <el-radio-group v-model="item.selected">
                  <el-radio label="1">禁止办理</el-radio>
                  <el-radio label="0">忽略</el-radio>
                </el-radio-group>
              </div>
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div slot="footer" class="dialog_footer">
      <el-button type="primary" @click="submit">提 交</el-button>
      <el-button @click="cancelDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { upward, down } from '@/utils/operation'
import { getDjlxInfo, getSqdjywDetail, saveSqdjyw } from "@/api/system.js";
export default {
  //父组件 传 过来的 值
  props: {
    dialogVisible: { type: Boolean, default: false },
    sqqlRule: { type: Object, default: {} },
  },
  watch: {
    dialogVisible: {
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.init();
        }
      },
      immediate: true,
    },
  },
  components: {},
  name: "componentDialog",
  data () {
    return {
      tn: 0,
      n: 0,
      djlxList: [],
      title: "",
      activeName: "1",
      form: {},
      djqxCol: [
        {
          width: '60',
          renderHeader: (h, scope) => {
            return <i class="el-icon-plus pointer" onClick={() => { this.handleAdd() }} style="color:#409EFF"></i>
          },
          render: (h, scope) => {
            return (
              <i class="el-icon-minus pointer" onClick={() => { this.handleMinus(scope.$index, scope.row) }}></i>
            )
          }
        },
        {
          width: '60',
          label: '序号',
          type: 'index'
        },
        {
          prop: 'nodecode',
          width: '105',
          label: '登记情形编码',
          render: (h, scope) => {
            return (
              <div>
                <el-input placeholder="登记情形编码" class={{ repeat: scope.row.repeat }} disabled={scope.row.sftsdjqx == '1'}
                  value={scope.row[scope.column.property]}
                  onInput={(val) => { scope.row[scope.column.property] = val }} onBlur={() => { this.nodecodeBlur(scope.$index, scope.row) }} maxlength="8">
                </el-input>
              </div>
            )
          }
        },
        {
          prop: 'nodename',
          label: '登记情形名称',
          render: (h, scope) => {
            return (
              <div>
                <el-input placeholder="登记情形名称" disabled={scope.row.sftsdjqx == '1'}
                  value={scope.row[scope.column.property]}
                  onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              </div>
            )
          }
        },
        {
          label: '是否启用登记情形',
          width: '141',
          render: (h, scope) => {
            return (
              <el-radio-group v-model={scope.row.enabled} disabled={scope.row.sftsdjqx == '1'} onChange={(val) => { scope.row[scope.column.property] = val }}>
                <el-radio label={'1'}>启用</el-radio>
                <el-radio label={'0'}>禁用</el-radio>
              </el-radio-group>
            )
          }
        },
        {
          prop: 'djyy',
          label: '登记原因模板',
          render: (h, scope) => {
            return (
              <div>
                <el-input placeholder="登记原因模板" disabled={scope.row.sftsdjqx == '1'} value={scope.row[scope.column.property]}
                  onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              </div>

            )
          }
        },
        {
          label: '是否启用模板',
          width: '140',
          render: (h, scope) => {
            return (
              <el-radio-group v-model={scope.row.sfqydjyymb} disabled={scope.row.sftsdjqx == '1'} onChange={(val) => { scope.row[scope.column.property] = val }}>
                <el-radio label={'1'}>启用</el-radio>
                <el-radio label={'0'}>禁用</el-radio>
              </el-radio-group>
            )
          }
        },
        {
          label: '移动',
          width: '100',
          render: (h, scope) => {
            return (
              <div>
                <el-button type='text' disabled={scope.$index == 0} onClick={() => { this.moveUpward(scope.$index, scope.row) }}>上移</el-button>
                <el-button type='text' disabled={(scope.$index + 1) == this.form.djqx.length} onClick={() => { this.moveDown(scope.$index, scope.row) }}>下移</el-button >
              </div>
            )
          }
        }
      ],
      clxxCol: [
        {
          width: '60',
          renderHeader: (h, scope) => {
            return <i class="el-icon-plus pointer" onClick={() => { this.handleAdd() }} style="color:#409EFF"></i>
          },
          render: (h, scope) => {
            return (
              <i class="el-icon-minus pointer" onClick={() => { this.handleMinus(scope.$index, scope.row) }}></i>
            )
          }
        },
        {
          width: '60',
          label: '序号',
          type: 'index'
        },
        {
          label: '是否必填',
          width: '100',
          render: (h, scope) => {
            return (
              <el-radio-group v-model={scope.row.isrequired} onChange={(val) => { scope.row[scope.column.property] = val }}>
                <el-radio label={'1'}>是</el-radio>
                <el-radio label={'0'}>否</el-radio>
              </el-radio-group>
            )
          }
        },
        {
          prop: 'clbm',
          label: '材料编码',
          width: '100',
          render: (h, scope) => {
            return (
              <el-input placeholder="材料编码" value={scope.row[scope.column.property]}
                onInput={(val) => { scope.row[scope.column.property] = val }} maxlength="8"></el-input>
            )
          }
        },
        {
          prop: 'clmc',
          label: '材料名称',
          render: (h, scope) => {
            return (
              <el-input placeholder="材料名称" value={scope.row[scope.column.property]}
                onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
            )
          }
        },
        {
          prop: 'cllx',
          label: '材料类型',
          width: '115',
          render: (h, scope) => {
            return (
              <el-select value={scope.row[scope.column.property]}
                onChange={(val) => { scope.row[scope.column.property] = val }} clearable>
                {
                  this.dictData['A40'].map(option => {
                    return (
                      <el-option label={option.dname} value={option.dcode}></el-option>
                    )
                  })
                }
              </el-select>
            )
          }
        },
        {
          label: '是否公共材料',
          width: '110',
          render: (h, scope) => {
            return (
              <el-radio-group v-model={scope.row.sfggcl} onChange={(val) => { scope.row[scope.column.property] = val; this.handleSelectGgcl(scope.row) }}>
                <el-radio label={'1'}>是</el-radio>
                <el-radio label={'0'}>否</el-radio>
              </el-radio-group>
            )
          }
        },
        {
          prop: 'djqxbm',
          label: '登记情形',
          width: '180',
          render: (h, scope) => {
            return (
              <el-select disabled={scope.row.sfggcl == '1'} value={scope.row[scope.column.property]}
                onChange={(val) => { scope.row[scope.column.property] = val }} clearable>
                {
                  this.form.djqx.map(option => {
                    return (
                      <el-option label={option.nodename} value={option.nodecode}></el-option>
                    )
                  })
                }
              </el-select>
            )
          }
        },
        {
          label: '移动',
          width: '90',
          render: (h, scope) => {
            return (
              <div>
                <el-button type='text' disabled={scope.$index == 0} onClick={() => { this.moveUpward(scope.$index, scope.row) }}>上移</el-button>
                <el-button type='text' disabled={(scope.$index + 1) == this.form.clxx.length} onClick={() => { this.moveDown(scope.$index, scope.row) }}>下移</el-button >
              </div>
            )
          }
        }
      ],
    };
  },
  computed: {
    ...mapGetters(['dictData'])
  },
  mounted () { },
  methods: {
    //页面初始化
    init () {
      this.tn = 0;
      getDjlxInfo(this.sqqlRule.bsmSqyw).then((res) => {
        let { result } = res;
        this.djlxList = result ? result : [];
        if(this.djlxList.length>0){
          this.getDetail(this.djlxList[0].bsmSqyw);
        }else{
           this.getDetail(this.sqqlRule.bsmSqyw);
        }       
      });
      //}
    },
    //tab选项卡事件
    handleTitleSelct (obj, index) {
      this.n = 0;
      this.tn = index;
      this.getDetail(this.djlxList[index].bsmSqyw);
    },
    //获取业务具体明细内容
    getDetail (bsmSqyw) {
      getSqdjywDetail(bsmSqyw).then((res) => {
        if (res.code === 200) {
          this.form = res.result;
        } else {
          this.$alert(res.message);
        }
      });
    },
    //提交保存数据
    submit () {
      let that = this;
      saveSqdjyw(this.form).then(res => {
        if (res.code == 200) {
          that.$message({
            message: '修改成功',
            type: 'success'
          })
          // that.$emit('input', false)
        }
      })
    },
    //修改父组件传过来的值
    cancelDialog () {
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>
<style lang='scss' scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBox.scss";

.contentBox {
  height: 75vh;
  overflow-y: scroll;
}

.el-radio-group {
  white-space: nowrap;
}

.form {
  background: #eee;
  padding: 0 10px;
}

.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;
    }
  }
}

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

.dyztsd-title {
  @include flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
}

.qlxx-list {
  @include flex;
  flex-wrap: wrap;
  padding-left: 20px;

  li {
    width: 25%;
    margin-bottom: 15px;
  }
}

.screen-list {
  @include flex;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid $borderColor;
  border-bottom: none;

  li {
    @include flex;
    align-items: center;
    width: 25%;
    line-height: 50px;
    border-bottom: 1px solid $borderColor;
    padding-left: 20px;
  }

  &-left {
    margin-right: 20px;
    width: 160px;
    white-space: nowrap;
  }

  li:nth-child(odd) {
    border-right: 1px solid $borderColor;
  }
}
</style>