<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="qurey">
          <el-input
            placeholder="请输入内容"
            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">添加</el-button>
          <span>（27/200）最多支持200个巡检点位以及内容</span>
        </div>
        <el-table :data="tableData" max-height="700">
          <el-table-column
            prop="date"
            label="序号"
            width="55"
            type="index"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="date"
            label="设备分类"
            :render-header="addRedStar"
            align="center"
          >
            <template slot-scope="scope">
              <el-select placeholder="请选择">
                <el-option label="item.label" value="item.value"> </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column
            prop="date"
            label="巡检标准"
            :render-header="addRedStar"
            align="center"
          >
            <template slot-scope="scope">
              <el-input type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="数据格式" align="center">
            <template slot-scope="scope">
              <el-select
                v-model="value"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择文章标签"
              >
                <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="智能识别类型" align="center">
            <template slot-scope="scope">
              <span class="intelligenceType" @click="intelligenceTypeBtn"
                >123123</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary"> 复制 </el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="saveBtn">
            <el-button type="primary">保存</el-button>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="设置智能识别类型"
      :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="序号"
        ></el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="算法名称"
        ></el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="阀值上限"
          :render-header="addRedStar"
        >
          <template slot-scope="scope">
            <el-input></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="阀值下限"
          :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">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</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: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  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>
