<template>
  <div style="padding: 10px">
    <div class="seetingsDiv" style="">
      <div class="flex" style="margin-top: 10px">
        <el-alert title="分别设置各种岗位分值区间   具体标签自动生成 规则：当某种性格/能力标签 大于 或小于分值区间标签自动贴上！ 如：感性 感性高  感性低" type="success"
          :closable="false">
        </el-alert> 
      </div>
      <div class="flex align-center" style="margin-top: 10px">
        <el-button type="success" @click="saveSetting">保存</el-button>
      </div>
    </div>
    <div class="main-box" style="padding:100px">

      <el-table ref="mytable" :data="table_data" style="width: 100%;display:block" border>
        <el-table-column width="155" label="性格" prop="title" align="center">
          <template slot-scope="{row}">

            <el-input size="small" v-model="row.title" placeholder="请输入标题">
            </el-input>

          </template>
        </el-table-column>
        <el-table-column align="center" v-for="(item, index, key) in table_columns" :item="item" :key="key"
          :index="index" :label="item">
          <template slot-scope="{row}">
            <el-col :span="11">
              <el-input size="small" v-model="row[item].start" placeholder="请输入开始分值">
              </el-input>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input size="small" v-model="row[item].end" placeholder="请输入结束分值">
              </el-input>
            </el-col>
            <!-- <el-input  
            size="small"
            v-model="row[item].start"
            placeholder="请输入开始分值"
          >
          </el-input> 
  -     <el-input  
  size="small"
  v-model="row[item].end"
  placeholder="请输入结束分值"
>
</el-input>  -->
            <!-- <el-input   v-if="scope.row[item]"
          size="small"
          v-model="scope.row[item].end"
          :placeholder="'请输入结束分值"
        >
        </el-input> -->
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" align="center" width="300" >
          <template slot-scope="scope"> 
            <el-button
              size="mini" 
              :plain="true"
              type="danger"
              style="margin-left: 10px"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>

      <el-table ref="mytable_gdf" :data="table_gdfdata" style="width: 100%;display:block" :show-header="false" border>
        <el-table-column width="155" label="能力" prop="title" align="center">
          <template slot-scope="{row}">

            <el-input size="small" v-model="row.title" placeholder="请输入标题">
            </el-input>

          </template>
        </el-table-column>
        <el-table-column align="center" v-for="(item, index, key) in table_columns" :item="item" :key="key"
          :index="index" :label="item">
          <template slot-scope="{row}">
            <el-input size="small" v-model="row[item].start" placeholder="请输入值">
            </el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" align="center" width="300" >
          <template slot-scope="scope"> 
            <el-button
              size="mini" 
              :plain="true"
              type="danger"
              style="margin-left: 10px"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>



      <el-table ref="mytable1" :data="table_nldata" style="width: 100%;display:block;margin-top:20px;" border>
        <el-table-column width="155" label="能力" prop="title" align="center">
          <template slot-scope="{row}">

            <el-input size="small" v-model="row.title" placeholder="请输入标题">
            </el-input>

          </template>
        </el-table-column>
        <el-table-column align="center" :label="'能力分值规则'">
          <template slot-scope="{row}">


            <el-col :span="11">
              <el-input size="small" v-model="row.scoreStart" placeholder="请输入开始分值">
              </el-input>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input size="small" v-model="row.scoreEnd" placeholder="请输入结束分值">
              </el-input>
            </el-col>
          </template>
        </el-table-column>
      </el-table>


      <el-table ref="mytable2" :data="table_stardata" style="width: 100%;display:block" border>
        <el-table-column width="155" label="星级" prop="title" align="center">
          <template slot-scope="{row}">

            <el-input size="small" v-model="row.title" placeholder="请输入标题">
            </el-input>

          </template>
        </el-table-column>
        <el-table-column align="center" v-for="(item, index, key) in table_columns" :item="item" :key="key"
          :index="index" :label="item">
          <template slot-scope="{row}">
            <el-col :span="11">
              <el-input size="small" v-model="row[item].start" placeholder="请输入开始分值">
              </el-input>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input size="small" v-model="row[item].end" placeholder="请输入结束分值">
              </el-input>
            </el-col>
            <!-- <el-input  
            size="small"
            v-model="row[item].start"
            placeholder="请输入开始分值"
          >
          </el-input> 
  -     <el-input  
  size="small"
  v-model="row[item].end"
  placeholder="请输入结束分值"
>
</el-input>  -->
            <!-- <el-input   v-if="scope.row[item]"
          size="small"
          v-model="scope.row[item].end"
          :placeholder="'请输入结束分值"
        >
        </el-input> -->
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" align="center" width="300" >
          <template slot-scope="scope"> 
            <el-button
              size="mini" 
              :plain="true"
              type="danger"
              style="margin-left: 10px"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>


    </div>

  </div>
  </div>
</template>

<script>
  import {
    UserInfo_BatchToUser,
    UserInfo_Delete,
    UserInfo_Update,
    UserInfo_List,
    UserTypeSettings,
    saveTypeSetting
  } from "@/api/user";
  export default {
    data() {
      return {
        currentFilePath: "",
        queryResult: {},
        queryModel: {
          pageIndex: 1,
          pageSize: 10,
        },

        query: {},
        new_date_json: {}, //数据结构
        multipleSelection: [], //复选框，数据
        is_edit: true, //是否可编辑
        is_delete: true, //是否可删除
        selection: true, //是否需要复选框
        radio: false, //单选变色
        space_color: true, //隔行变色

        //表头信息
        table_columns: [
          // {
          //   prop: "",
          //   label: "",
          //   width: "150",
          // },
          // {
          //   prop: "PhoneNumber",
          //   label: "手机号",
          //   width: "150",
          // },
          // {
          //   prop: "DateBirth",
          //   label: "出生日期",
          //   width: "180",
          // },
          // {
          //   prop: "Gender",
          //   label: "性别",
          //   width: "80",
          // },
          // {
          //   prop: "GraduationSchool",
          //   label: "毕业学校",
          //   width: "200",
          // },
          // {
          //   prop: "GraduationMajor",
          //   label: "专业",
          //   width: "200",
          // },
          // {
          //   prop: "Education",
          //   label: "最高学历",
          //   width: "",
          // },
          // {
          //   prop: "IntendedCity",
          //   label: "城市",
          //   width: "150",
          // },
        ],
        //表格数据
        table_data: [], //性格
        table_nldata: [], //能力 规则
        table_stardata: [], //星级分值规则
        table_gdfdata: [] //高低分
      };
    },
    methods: {
      saveSetting() {
        var saveForm = {
          xg: this.table_data || [], //性格
          nl: this.table_nldata || [], //能力 规则
          star: this.table_stardata || [], //星级分值规则
          gdf: this.table_gdfdata || [] //高低分
        };
        saveTypeSetting({ Value: JSON.stringify(saveForm) }).then(res => {
          if (res.data && res.data > 0) {
            this.$message({
              message: "更新成功！",
              type: "success",
            });
          }
          else {

            this.$message({
              message: "更新失败！",
              type: "warning",
            });

          }
        });
      },
      handleExceed() { },
      handleSuccess(res) {
        this.$refs.uploader.clearFiles();
        this.search();
      },
      search() {
        this.queryModel.pageIndex = 1;
        this.getList();
      },
      getList() {
        UserTypeSettings({}).then((res) => {

          if (res.data) {
            this.table_columns = res.data.columns;
            this.table_data = res.data.list || [];
            this.table_nldata = res.data.nlList || [];
            this.table_stardata = res.data.starList || [];
            this.table_gdfdata = res.data.gdList || [];

          }

        });
      },
      //隔行变色
      tableRowClassName() {
        //选取DOM节点
        var trs = this.$refs.mytable.$el
          .getElementsByTagName("tbody")[0]
          .getElementsByTagName("tr");
        for (var i in trs) {
          if (i % 2 == 0) {
            //当隔行变色未true时改变颜色
            if (this.space_color) {
              trs[i].style.backgroundColor = "#f0f9eb";
            } else {
              trs[i].style.backgroundColor = "";
            }
          }
        }
      },

      //多选框
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log("selection:", this.multipleSelection);
      },
      //编辑
      handleEdit(index, row) {
        var model;
        this.table_data = this.table_data.map(t => {
          delete t.edit;
          return t;
        })
        this.$set(this.table_data[index], 'edit', true)


      },
      //删除
      handleDelete(index, row) {
        console.log(index, row);

        this.table_data.splice(index, 1);
        // UserInfo_Delete(row.id);
        // this.$message({
        //   message: "删除成功！",
        //   type: "success",
        // });
      },

      handleshare(index, row) {
        if (!row) {
          this.table_data = [];
        } else {
          console.log(index, row);
          this.table_data.splice(index, 1);
        }
        UserInfo_BatchToUser(row.id);
        this.$message({
          message: "入库成功！",
          type: "success",
        });
      },

      //保存
      handleSave(index, row) {
        delete this.table_data[index].edit;
        let formData = { ...row };
        delete formData.DataJsonObj;
        UserInfo_Update(row);
        this.table_data.push(this.table_data.pop());
        this.$forceUpdate();
        this.$message({
          message: "保存成功！",
          type: "success",
        });
      },
      handleCancelSave(index, row) {
        delete this.table_data[index].edit;
        if (this.currentFilePath == row.ViewPath) {
          this.currentFilePath = '';
        }
        this.table_data.push(this.table_data.pop());
      },
      handleAdd() {
        var addDataJson = {};
        for (var key in this.new_date_json) {
          if (key === "edit") {
            delete addDataJson[key];
          } else if (key === "add") {
            delete addDataJson[key];
          } else {
            addDataJson[key] = "";
          }
        }
        addDataJson.edit = true;
        addDataJson.add = true;
        this.table_data.push(addDataJson);
      },
      //初始化编辑属性
      initEditAttribute() {
        var self = this;
        var edit = self.edit;
      },
      initAddDataJson(dataArray) {
        //新增时，初始化数据结构
        var dataJson = dataArray;
        var newDateJson = {};
        for (var key in dataJson) {
          if (key === "edit") {
            newDateJson[key] = "true";
          } else {
            newDateJson[key] = "";
          }
        }
        newDateJson["add"] = true;
        this.new_date_json = newDateJson;
      },
    },
    created() {
      this.getList();
    },
    mounted: function () {
      this.initEditAttribute();
      //确保方法在页面渲染后调用
      this.$nextTick(function () {
        /////方法
        this.tableRowClassName();
      });
    },
    watch: {
      // space_color: function () {
      //   //监听数据变化
      //   this.$nextTick(function () {
      //     /////方法
      //     this.tableRowClassName();
      //   });
      // },
      // table_data: function () {
      //   //监听数据变化f
      //   this.$nextTick(function () {
      //     /////方法
      //     this.tableRowClassName();
      //   });
      // },
    },
  };
</script>
<style lang="scss" scoped>
  .main-box {
    /* display: flex; */
  }

  .doc-view {
    margin-left: 10px;
    width: 100%;
    flex: 1;
    overflow: hidden;
  }

  .el-table__expanded-cell {
    padding: 10px;
  }

  .demo-table-expand {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 10px;
  }

  .demo-table-expand .el-form-item {
    margin-bottom: 10px !important;
    min-width: 20%;
    max-width: 50%;
  }

  .demo-form-inline {
    display: flex;
    align-items: center;
  }

  .el-form--inline .el-form-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
  }

  .aligin-center {
    align-items: center;
  }

  .seetingsDiv {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 30px;
    background: #efefef;
    /* line-height: 60px; */
    border-radius: 5px;
    box-shadow: 0 0 5px #cdcdcd;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  .seetingsDiv button {
    height: 40px;
    background-color: #304156;
    border: 0px;
    margin-left: 10px;
    box-shadow: 0 0 5px #cdcdcd;
    float: none;
    margin-right: 10px;
    margin-top: 0;
  }
</style>