<template>
  <!-- 指标考核库管理 -->
  <div class="page">
    <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
                :show-irrelevant-nodes="false"
                :pattern="pattern"
                :node-props="nodeProps"
                :default-expanded-keys="defaultTree"
                key-field="id"
                label-field="normName" />
      </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.normName"
                       placeholder=""
                       readonly="true" />
            </n-form-item>
            <n-form-item label="考核指标类型："
                         path="insTwoName">
              <n-input v-model:value="rightTable.data.indicatorType"
                       placeholder=""
                       readonly="true" />
            </n-form-item>
            <n-form-item label="标准分值："
                         path="score">
              <n-input v-model:value="rightTable.data.defScore"
                       placeholder=""
                       readonly="true" />
            </n-form-item>
            <n-form-item label="指标解释："
                         path="indexExp">
              <n-input v-model:value="rightTable.data.normRemark"
                       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.evaluateStandard"
                       placeholder=""
                       type="textarea"
                       :autosize="{ minRows: 3, maxRows: 10 }"
                       readonly="true" />
            </n-form-item>
          </div>

          <div class="tableName">附加信息</div>
          <div class="bottomTable">
            <n-space>
              <n-form-item label="创建者："
                           path="creator">
                <n-input v-model:value="rightTable.data.createBy"
                         placeholder=""
                         readonly="true" />
              </n-form-item>
              <n-form-item label="创建时间："
                           path="creatime">
                <n-date-picker v-model:value="rightTable.data.createTime"
                               placeholder=""
                               readonly="true" />
              </n-form-item>
            </n-space>
            <n-space>
              <n-form-item label="操作者："
                           path="operUser">
                <n-input v-model:value="rightTable.data.updateBy"
                         placeholder=""
                         readonly="true" />
              </n-form-item>
              <n-form-item label="操作时间："
                           path="operatime">
                <n-date-picker v-model:value="rightTable.data.updateTime"
                               placeholder=""
                               readonly="true" />
              </n-form-item>
            </n-space>
          </div>
        </n-form>
      </div>
    </div>
  </div>

</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import { userIndicatorlibraryTree, userIndicatorlibraryInfo, getperfdicInfo } from "@/services";
export default {
  name: 'page',
  components: [],
  setup() {
    const allData = reactive({
      defaultTree: [8, 9],
      pattern: "",
      id: 10,
      parentId: 8,
      treesData: [],
      rightTable: {
        data: {
          normName: null, //指标名称
          indicatorType: null, //考核指标类型
          defScore: null, //标准分值
          normRemark: null, //指标解释
          evaluateStandard: null, //评分标准
          updateBy: '', //操作人
          updateTime: null,
          createBy: '',
          createTime: null,
        },
      },
    });
    //获取指标树
    const GetIndexTree = async () => {
      let res = await userIndicatorlibraryTree();
      if (res && res.code == 200) {
        allData.treesData = res.data;
      }
    };
    //树节点点击事件
    const nodeProps = ({ option }) => {
      return {
        onClick() {
          allData.parentId = option.pid;
          allData.id = option.id;
          getTableData();
        },
      };
    };
    // 获取表格数据
    const getTableData = async () => {
      let pramas = {
        id: allData.id,
        parentId: allData.parentId
      };
      let res = await userIndicatorlibraryInfo(pramas);
      if (res && res.code === 200) {
        let data = res.data;
        //右侧信息
        allData.rightTable.data = data;
        if (!!data.updateBy) {
          allData.rightTable.data.updateBy = data.updateBy;
        } else {
          allData.rightTable.data.updateBy = ''
        };
        if (!!data.updateTime) {
          allData.rightTable.data.updateTime = data.updateTime = Date.parse(data.updateTime);
        } else {
          allData.rightTable.data.updateTime = null;
        }
        if (!!data.createBy) {
          allData.rightTable.data.createBy = data.createBy;
        } else {
          allData.rightTable.data.createBy = '';
        }
        if (!!data.createTime) {
          allData.rightTable.data.createTime = data.createTime = Date.parse(data.createTime);
        } else {
          allData.rightTable.data.createTime = null;
        }
      };
    };
    onMounted(() => {
      GetIndexTree();
      getTableData();
    });
    onBeforeMount(() => { });
    return {
      ...toRefs(allData),
      nodeProps,
      GetIndexTree,
      getTableData,
    };
  },
};
</script>
<style lang="less" scoped>
.page {
  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>