<template>
  <div class="indexLibraryTwo">
    <div class="btnBox">
      <n-input v-model:value="pattern" style="width: 30.5%" placeholder="搜索" />
    </div>
    <div class="content">
      <!-- 左侧树状目录 -->
      <div class="treeLeft">
        <n-tree
          :data="treesData"
          block-line
          :default-expanded-keys="defaultTree"
          :pattern="pattern"
          :node-props="nodeProps"
        />
      </div>
      <!-- 右侧表单 -->
      <div class="tableRight">
        <n-form
          ref="formRef"
          label-align="right"
          require-mark-placement="left"
          :label-width="100"
          :model="rightTable.data"
          label-placement="left"
        >
          <div class="tableName">指标信息</div>
          <div class="topTable">
            <n-form-item label="指标名称：" path="indexName">
              <n-input v-model:value="rightTable.data.indexName" placeholder="" readonly="true" />
            </n-form-item>
            <n-form-item label="考核指标类型：" path="insTwoName">
              <n-input v-model:value="rightTable.data.insTwoName" placeholder="" readonly="true" />
            </n-form-item>
            <n-form-item label="适用考核范围：" path="insThreeName">
              <n-input v-model:value="rightTable.data.insThreeName" placeholder="" readonly="true" />
            </n-form-item>
            <n-form-item label="考核方式：" path="checkWay">
              <n-input v-model:value="rightTable.data.checkWay" placeholder="" readonly="true" />
            </n-form-item>
            <n-form-item label="标准分值：" path="score">
              <n-input v-model:value="rightTable.data.score" placeholder="" readonly="true" />
            </n-form-item>
            <n-form-item label="指标解释：" path="indexExp">
              <n-input
                v-model:value="rightTable.data.indexExp"
                placeholder=""
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 6 }"
                readonly="true"
              />
            </n-form-item>
            <n-form-item label="评分标准：" path="scoreStandard">
              <n-input
                v-model:value="rightTable.data.scoreStandard"
                placeholder=""
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 10 }"
                readonly="true"
              />
            </n-form-item>
            <n-form-item label="评价依据：" path="scoreBasis">
              <n-input
                v-model:value="rightTable.data.scoreBasis"
                placeholder=""
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 5 }"
                readonly="true"
              />
            </n-form-item>
          </div>
        </n-form>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, h, reactive, toRefs } from 'vue';
import { Settings, AddCircleOutline } from '@vicons/ionicons5';
import { IndicatorTreeInfo, IndicatorlibraryTree } from '@/services';
export default {
  name: 'indexLibraryTwo',
  components: {
    Settings,
    AddCircleOutline,
  },
  setup() {
    const allData = reactive({
      defaultTree: ['-1'],
      pattern: '',
      searchVal1: '',
      showModal: false,
      modelTitle: '新增考核项',
      disabled: false,
      options1: [
        { value: 1, label: '目录结构' },
        { value: 2, label: '考核指标' },
      ],
      codeNameoptions: [],
      options2: [],
      options3: [],
      options4: [],
      treesData: [],
      parentId: '15',
      curentId: '16',
      rightTable: {
        data: {
          indexName: null, //指标名称
          insTwoName: null, //考核指标类型
          insThreeName: null, //适用考核范围
          checkWay: null, //考核方式
          score: 'null', //标准分值
          indexExp: null, //指标解释
          scoreStandard: null, //评分标准
          scoreBasis: null, //评分依据
        },
      },
      treeId: null,
      formInfo: {
        data: {
          pid: null,
          insTwoId: null, //二级指标
          insTwoName: null,
          insThreeId: null, //三级指标
          insThreeName: null,
          indexName: null, //指标名称
          score: null, //标准分值
          indexExp: null, //指标解释
          scoreStandard: null, //评分标准
          scoreBasis: null, //评分依据
          id: null,
        },
        rules: {},
      },
    });
    const addFormRef = ref(null);
    const data = ref([]);

    //获取指标树IndicatorlibraryTree
    const GetIndexTree = async () => {
      let res = await IndicatorlibraryTree();
      if (res && res.code == 200) {
        allData.treesData = res.data;
      }
    };

    // 获取表格数据
    const getTableData = async () => {
      let pramas = {
        id: allData.curentId,
      };
      let res = await IndicatorTreeInfo(pramas);
      if (res && res.code === 200) {
        let data = res.data;
        //右侧信息
        allData.rightTable.data.checkWay = data.checkWay;
        allData.rightTable.data.insTwoName = data.insTwoName;
        allData.rightTable.data.insThreeName = data.insThreeName;
        allData.rightTable.data.indexExp = data.indexExp;
        allData.rightTable.data.indexName = data.indexName;
        allData.rightTable.data.score = String(data.score);
        allData.rightTable.data.scoreBasis = data.scoreBasis;
        allData.rightTable.data.scoreStandard = data.scoreStandard;
      }
    };
    //树节点点击事件
    const nodeProps = ({ option }) => {
      return {
        onClick() {
          allData.parentId = option.pid;
          allData.curentId = option.key;
          allData.treeId = option.id;
          getTableData();
        },
      };
    };
    onMounted(() => {
      GetIndexTree();
      getTableData();
    });
    return {
      addFormRef,
      data,
      ...toRefs(allData),
      getTableData,
      GetIndexTree,
      nodeProps,
    };
  },
};
</script>

<style lang="less" scoped>
.indexLibraryTwo {
  position: relative;
  height: 100%;
  .btnBox {
    margin: 10px;
    .n-button {
      margin: 0 10px 0;
    }
  }
  .content {
    display: flex;
    .treeLeft {
      height: calc(100vh - 120px);
      margin: 0 10px;
      width: 30%;
      padding: 15px;
      overflow: auto;
      border: 1px solid rgb(20, 217, 215);
    }
    .tableRight {
      overflow: auto;
      width: 50%;
      flex: 1;
      top: 40px;
      padding: 15px;
      height: calc(100vh - 120px);
      background: #00364d;
      .tableName {
        border-bottom: 2px solid rgb(20, 217, 215);
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }
    }
  }
}
</style>