<template>
  <el-dialog
    :title="sqqlRule.nodename"
    :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>
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item title="业务详情" name="1">
        <el-form
          :model="form"
          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="form.ywDetail.qllxbm" disabled></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="权利类型名称">
                <el-input v-model="form.ywDetail.qllxmc" disabled></el-input>
              </el-form-item>
            </el-col>
            <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-row>
          <!-- <el-row>
            <el-col :span="8">
              <el-form-item label="登记类型编码">
                <el-input v-model="form.ywDetail.djlxbm" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登记类型名称">
                <el-input v-model="form.ywDetail.djlxmc" disabled></el-input>
              </el-form-item>
            </el-col>
            <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-row>
          <el-row>
            <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="16">
              <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="是否启用" 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="16">
              <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="登记情形及材料">
                <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="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-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-item>
      <el-collapse-item title="登记情形设置" name="2">
        <div>
          控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
        </div>
        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
      </el-collapse-item>
      <el-collapse-item title="材料信息设置" name="3">
        <div>简化流程：设计简洁直观的操作流程；</div>
        <div>
          清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
        </div>
        <div>
          帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
        </div>
      </el-collapse-item>
      <el-collapse-item title="刷选条件设置" name="4">
        <div>
          用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
        </div>
        <div>
          结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
        </div>
      </el-collapse-item>
    </el-collapse>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelDialog">取 消</el-button>
      <el-button type="primary" @click="cancelDialog">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getDjlxInfo, getSqdjywDetail } 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: {},
    };
  },
  mounted() {},
  methods: {
    //页面初始化
    init() {
      getDjlxInfo(this.sqqlRule.bsmSqyw).then((res) => {
        let { result } = res;
        this.djlxList = result ? result : [];
        this.getDetail(this.djlxList[0].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);
        }
      });
    },
    //修改父组件传过来的值
    cancelDialog() {
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>
<style lang='scss' scoped>
@import "~@/styles/mixin.scss";
.form {
  background: #eee;
  padding: 0 10px;
}
.dialog-footer {
  text-align: center;
}
.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;
}
</style>