<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="qurey">
          <el-input
            :placeholder="$t('point_mang.PleaseEnterTheContent')"
            v-model="input3"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              type="primary"
            ></el-button>
          </el-input>
        </div>
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-col>
      <el-col :span="20">
        <div>
          <el-button type="primary">{{ $t("share.addTo") }}</el-button>
          <span>（0/200）{{ $t("point_mang.tableHeadMsg") }}</span>
        </div>
        <el-table :data="tableData" max-height="700" style="margin-top: 10px">
          <el-table-column
            prop="date"
            :label="$t('point_mang.index')"
            width="55"
            type="index"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="date"
            :label="$t('point_mang.equipmentClassification')"
            :render-header="addRedStar"
            align="center"
          >
            <template slot-scope="scope">
              <el-select
                :placeholder="
                  $t('share.PleaseChoose') +
                  $t('point_mang.equipmentClassification')
                "
              >
                <el-option label="item.label" value="item.value"> </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column
            prop="date"
            :label="$t('point_mang.InspectionStandards')"
            :render-header="addRedStar"
            align="center"
          >
            <template slot-scope="scope">
              <el-input
                type="textarea"
                :placeholder="
                  $t('share.PleaseChoose') + $t('point_mang.PleaseEnter')
                "
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            :label="$t('point_mang.dataFormat')"
            align="center"
          >
            <template slot-scope="scope">
              <el-select
                v-model="value"
                multiple
                filterable
                allow-create
                default-first-option
                :placeholder="
                  $t('share.PleaseChoose') + $t('point_mang.dataFormat')
                "
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            :label="$t('point_mang.IntelligentRecognitionType')"
            align="center"
          >
            <template slot-scope="scope">
              <span class="intelligenceType" @click="intelligenceTypeBtn"
                >123123</span
              >
            </template>
          </el-table-column>
          <el-table-column :label="$t('share.operate')" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary">
                {{ $t("share.copy") }}
              </el-button>
              <el-button size="mini" type="danger">{{
                $t("share.delete")
              }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="saveBtn">
          <el-button type="primary">{{ $t("share.save") }}</el-button>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="$t('point_mang.SetIntelligentRecognitionType')"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-table :data="intelligenceTypeData">
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          type="index"
          width="55"
          align="center"
          :label="$t('point_mang.index')"
        ></el-table-column>
        <el-table-column
          prop="name"
          align="center"
          :label="$t('point_mang.AlgorithmName')"
        ></el-table-column>
        <el-table-column
          prop="name"
          align="center"
          :label="$t('point_mang.ThresholdUpperLimit')"
          :render-header="addRedStar"
        >
          <template slot-scope="scope">
            <el-input></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          :label="$t('point_mang.LowerThresholdLimit')"
          :render-header="addRedStar"
        >
          <template slot-scope="scope">
            <el-input></el-input>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('share.cancel') }}</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >{{ $t('share.confirm') }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: "一级 1",
          type: 1,
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                  children: [
                    {
                      label: "四级 1-1-1-1",
                      type: 4,
                    },
                    {
                      label: "四级 1-1-1-2",
                      type: 4,
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [{}],
      options: [
        {
          value: "HTML",
          label: "HTML",
        },
        {
          value: "CSS",
          label: "CSS",
        },
        {
          value: "JavaScript",
          label: "JavaScript",
        },
      ],
      value: [],
      dialogVisible: false,
      intelligenceTypeData: [],
    };
  },
  methods: {
    // 给表头加必填符号*
    addRedStar(h, { column }) {
      return [
        h("span", { style: "color: red" }, "*"),
        h("span", " " + column.label),
      ];
    },
    intelligenceTypeBtn() {
      this.dialogVisible = true;
    },
    // 给表头加必填符号*
    addRedStar(h, { column }) {
      return [
        h("span", { style: "color: red" }, "*"),
        h("span", " " + column.label),
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
.qurey {
  display: flex;
  margin-bottom: 10px;
  ::v-deep.el-button {
    background-color: #46a6ff !important;
    color: #fff !important ;
  }
}
.intelligenceType {
  color: rgb(17, 189, 217);
  cursor: pointer;
}
.saveBtn {
  text-align: center;
  margin-top: 10px;
}
</style>
