<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane label="规则信息">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="认证类型" prop="cert_field">
                <treeselect v-model="formData.cert_field" :multiple="false" :options="cert_fieldOptions" placeholder="请选择认证类型" :style="{width: '100%'}" @select="typeChange"
                :clearable="false" :defaultExpandLevel='1' :disable-branch-nodes="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="规则编号" prop="code">
                <el-input
                  v-model="formData.code"
                  placeholder="请输入规则编号"
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="规则名称" prop="name">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入规则名称"
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-col :span="24">
            <el-form-item label="认证模式" prop="cert_pattern">
              <el-select
                v-model="formData.cert_pattern"
                placeholder="请选择认证模式"
                clearable
                :style="{width: '100%'}"
                :multiple="true"
              >
                <el-option
                  v-for="(item, index) in cert_patternOptions"
                  :key="index"
                  :label="item.fullname"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="cert_field_code =='PV'">
            <el-form-item label="产品领域" prop="pv_scope">
              <el-select
                v-model="formData.pv_scope"
                placeholder="请选择产品领域"
                clearable
                :style="{width: '100%'}"
              >
                <el-option
                  v-for="(item, index) in pv_scopeOptions"
                  :key="index"
                  :label="item.fullname"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="cert_field_code =='PV'">
            <el-form-item label="产品分类" prop="pv_class">
              <treeselect
                v-model="formData.pv_class"
                placeholder="请选择产品分类"
                clearable
                :style="{width: '100%'}"
                :options="pv_classOptions"
                :multiple="false"
              ></treeselect>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="cert_field_code =='CCC'">
            <el-form-item label="产品分类" prop="ccc_list">
              <treeselect
                v-model="formData.ccc_list"
                placeholder="请选择产品分类"
                clearable
                :style="{width: '100%'}"
                :options="ccc_listOptions"
                :multiple="true"
              ></treeselect>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="文件" prop="path">
              <el-upload
                :on-preview="handlePreview"
                :on-success="handleSuccess"
                :action="upUrl"
                :headers="upHeaders"
                :limit="1"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="margin-top:4px">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">保存</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="单元类型划分" v-if="(cert_field_code =='CCC'|| cert_field_code == 'PV')&&(formData.id)">
        <Unittype :implementrule="formData.id"></Unittype>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getDictList } from "@/api/dict";
import { updateImplementRule, getImplementRule } from "@/api/implementrule";
import { genTree } from "@/utils";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { upUrl, upHeaders } from "@/api/file";
import Unittype from "@/views/implementrule/unittype";

export default {
  components: { Treeselect, Unittype },
  props: [],
  data() {
    return {
      fileList: [],
      upHeaders: upHeaders(),
      upUrl: upUrl(),
      formData: {
        cert_field: undefined,
        code: undefined,
        name: undefined,
        pv_scope: undefined,
        pv_class: undefined,
        ccc_list: undefined
      },
      rules: {
        cert_field: [
          {
            required: true,
            message: "请选择认证类型",
            trigger: "change"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入规则编号",
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            message: "请输入规则名称",
            trigger: "blur"
          }
        ],
        cert_pattern: [
          {
            required: true,
            message: "请选择",
            trigger: "blur"
          }
        ],
        pv_scope: [],
        pv_class: [],
        ccc_list: []
      },
      cert_fieldOptions: [],
      cert_field_code:null,
      pv_scopeOptions: [],
      pv_classOptions: [],
      ccc_listOptions: [],
      cert_patternOptions: []
    };
  },
  computed: {},
  watch: {
    // "formData.cert_field": "changeRules"
  },
  created() {
    this.formData.id = this.$route.query.id; //接收参数
    this.getRule();
    this.getPvscope();
    this.getPvclass();
    this.getCccList();
    this.getCertpattern();
    this.getCerttype();
  },
  mounted() {},
  methods: {
    typeChange(node,id){
      this.cert_field_code = node.code
      this.changeRules(node.code)
    },
    handlePreview(file) {
      if ("url" in file) {
        window.open(file.url);
      } else {
        window.open(file.response.data.path);
      }
    },
    handleSuccess(response, file, fileList) {
      this.formData.path = response.data.path;
    },
    changeRules(val) {
      if (val == "PV") {
        this.rules.pv_scope = [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ];
        this.rules.pv_class = [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ];
        this.rules.ccc_list = [];
      } else if (val == "CCC") {
        this.rules.ccc_list = [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ];
        this.rules.pv_class = [];
        this.rules.pv_scope = [];
      } else {
        this.rules.pv_class = [];
        this.rules.pv_scope = [];
        this.rules.ccc_list = [];
      }
    },
    getRule() {
      getImplementRule(this.formData.id).then(response => {
        this.formData = response.data;
        this.cert_field_code = response.data.cert_field_.code
      });
    },
    getPvscope() {
      getDictList({ type__code: "pv_scope" }).then(response => {
        if (response.data) {
          this.pv_scopeOptions = genTree(response.data);
        }
      });
    },
    getPvclass() {
      getDictList({ type__code: "pv_class" }).then(response => {
        if (response.data) {
          this.pv_classOptions = genTree(response.data);
        }
      });
    },
    getCerttype() {
      getDictList({ type__code: "cert_field" }).then(response => {
        if (response.data) {
          this.cert_fieldOptions = genTree(response.data);
        }
      });
    },
    getCccList() {
      getDictList({ type__code: "ccc_list" }).then(response => {
        if (response.data) {
          this.ccc_listOptions = genTree(response.data);
        }
      });
    },
    getCertpattern() {
      getDictList({ type__code: "cert_pattern" }).then(response => {
        if (response.data) {
          this.cert_patternOptions = genTree(response.data);
        }
      });
    },
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        // TODO 提交表单
        updateImplementRule(this.formData.id, this.formData).then(response => {
          this.$message({
            type: 'success',
            message: '成功!'
          })
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    }
  }
};
</script>