<!-- 信息分类 -->
<template>
  <div class="datamanage-wrapper">
    <div class="search-wrapper">
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-circle-plus"
        class="addbtn"
        @click="addDialogData()"
      >新增</el-button>
    </div>
    <div class="table-wrapper">
      <div class="infoline">信息分类列表</div>

      <el-table
        ref="table"
        lazy
        :load="getDeptDatas"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :data="typeManage.fromData"
        row-key="id"
      >
        <!-- <el-table-column :selectable="checkboxT" type="selection" width="55" /> -->
        <el-table-column label="名称" prop="label" style="width: 100px" />
        <el-table-column type="index" label="序号" style="width: 100px" />
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="typeEdit($event, scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="typeDelete(scope.row)"
            >删除</el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-zoom-in"
              @click="lookClassButton(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="新增分类名称" :visible.sync="typeManage.addDialog">
      <el-form ref="addDataForm" :model="typeManage.from" :rules="formrules">
        <el-form-item prop="addname" label="分类名称:" :label-width="'120px'">
          <el-input
            v-model="typeManage.from.addname"
            clearable
            style="width: 220px"
            placeholder="请输入类别"
          />
        </el-form-item>
        <el-form-item prop="test" label="推送信息:" :label-width="'120px'">
          <el-select
            v-model="typeManage.from.test"
            multiple
            placeholder="请选择"
            style="width: 220px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="id" label="添加到:" :label-width="'120px'">
          <treeselect
            v-model="typeManage.from.id"
            :options="infoTree.menus"
            :load-options="loadInfoTreeMenus"
            style="width: 180px"
            placeholder="选择上级类目"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button
          type="primary"
          :loading="typeManage.flag === 0"
          @click="determine"
        >确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑分类名称" :visible.sync="typeManage.editDialog">
      <el-form ref="editDataForm" :model="editFormInfo" :rules="rules">
        <el-form-item prop="type" label="分类名称:" :label-width="'120px'">
          <el-input
            v-model="editFormInfo.type"
            clearable
            style="width: 220px; margin-left: 20px"
            placeholder="请输入类别"
          />
        </el-form-item>
        <el-form-item prop="choose" label="推送信息:" :label-width="'120px'">
          <el-select
            v-model="editFormInfo.choose"
            multiple
            placeholder="请选择"
            style="width: 220px; margin-left: 20px"
            @change="selectChange"
          >
            <el-option
              v-for="item in newoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="pid" label="添加到:" :label-width="'120px'">
          <treeselect
            v-model="editFormInfo.pid"
            :options="infoTree.menus"
            :load-options="loadInfoTreeMenus"
            style="width: 180px"
            placeholder="选择上级类目"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button
          type="primary"
          icon="el-icon-success"
          :loading="editFormInfo.flag === 0"
          @click="uploadAddForm"
        >确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="查看信息分类人员信息"
      :visible.sync="lookClassData.dialogOff"
    >
      <!--表格渲染-->
      <el-table ref="table" :data="lookClassData.tableData" style="width: 100%">
        <el-table-column
          :show-overflow-tooltip="true"
          prop="username"
          label="用户名"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="phone"
          width="100"
          label="电话"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          width="135"
          prop="email"
          label="邮箱"
        />
        <el-table-column :show-overflow-tooltip="true" prop="name" label="部门">
          <template slot-scope="scope">
            <div>{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="状态" align="center" prop="enabled">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.enabled"
                :disabled="user.id === scope.row.id"
                active-color="#409EFF"
                inactive-color="#F56C6C"
              />
            </template>
          </el-table-column> -->
        <el-table-column
          v-if="checkPer(['admin', 'user:edit', 'user:del'])"
          label="操作"
          width="300"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <!-- <el-button
					 @click="addDialogData('edit',scope.row.id,scope.row)"
					:disabled="scope.row.name !='销售三中心'
					&&scope.row.name !='销售五中心'&&scope.row.name !='销售一中心'
					&&scope.row.name !='销售二中心'&&scope.row.name !='销售六中心'&&
					scope.row.name !='销售一部'&&scope.row.name !='销售三部'&&
					scope.row.name !='销售二部'&&scope.row.name !='外贸部'&&scope.row.name !='副总经理'"
					 size="mini"
					 type="primary"
					>
					 信息权重
				 </el-button> -->
            信息权重
            <el-input-number
              v-model="scope.row.value"
              small
              step-strictly
              :disabled="
                scope.row.name != '销售三中心' &&
                  scope.row.name != '销售五中心' &&
                  scope.row.name != '销售一中心' &&
                  scope.row.name != '销售二中心' &&
                  scope.row.name != '销售六中心' &&
                  scope.row.name != '销售一部' &&
                  scope.row.name != '销售三部' &&
                  scope.row.name != '销售二部' &&
                  scope.row.name != '外贸部' &&
                  scope.row.name != '副总经理'
              "
              controls-position="right"
              :min="1"
              :max="3"
              @change="lookClassDataInputChange(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        layout="prev, pager, next"
        :total="lookClassData.tableTotal"
        @current-change="lookClassPaginaChange"
      />
      <div slot="footer">
        <el-button
          type="primary"
          icon="el-icon-success"
          :loading="editFormInfo.flag === 0"
          @click="lookClassData.dialogOff = !lookClassData.dialogOff"
        >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllCategory,
  getNameCategory,
  addClassification,
  editClassification,
  deleteTypeDict,
  getClassifyUserMessage,
  changeClassInput
} from '@/api/classifyData.js'
import { reqInformationTreeList, reqAllInfoTreeList } from '@/api/treeMenus.js'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { Treeselect },
  data() {
    return {
      // 1.获取全部信息分类
      typeManage: {
        page: 1,
        size: 10,
        total: 0,
        selectdata: [],
        dropData: [],
        addDialog: false,
        flag: 1,
        pid: 0,
        from: {
          addname: '',
          test: [] // 默认选项，要在el-checkbox-group里绑定一个空数组
        },
        editDialog: false,
        fromData: []
      },
      // 2.根据名称获取信息分类
      name: '',

      // 3.新增信息分类
      options: [
        {
          value: '姓名',
          label: '姓名'
        },
        {
          value: '电话',
          label: '电话'
        },
        {
          value: '公司名称',
          label: '公司名称'
        },
        {
          value: '需求描述',
          label: '需求描述'
        }
      ],
      chooseString: '',
      // 4.编辑信息分类
      editFormInfo: {
        flag: 1,
        type: '',
        send: '',
        id: '',
        choose: [],
        pid: 0
      },
      editString: '',
      checkList: [],
      newoptions: [
        {
          value: '姓名',
          label: '姓名'
        },
        {
          value: '电话',
          label: '电话'
        },
        {
          value: '公司名称',
          label: '公司名称'
        },
        {
          value: '需求描述',
          label: '需求描述'
        }
      ],
      newval: [],
      // 验证
      formrules: {
        addname: [{ required: true, message: '请输入类别', trigger: 'blur' }],
        test: [
          { required: true, message: '请选择推送信息', trigger: 'change' }
        ]
      },
      rules: {
        type: [{ required: true, message: '请输入类别', trigger: 'blur' }],
        choose: [
          { required: true, message: '请选择推送信息', trigger: 'change' }
        ]
      },
      infoTree: {
        menus: [{ id: 0, label: '信息分类', children: null, pid: -1 }]
      },
      // 查看分类人员信息相关
      lookClassData: {
        dialogOff: false,
        tableData: [],
        lookClassDataId: '',
        page: 1,
        pageSize: 10,
        tableTotal: 100
      }
    }
  },
  mounted() {
    var that = this
    // 信息分类字典
    this.reqBuildTreeList()

    this.classification()
    this.getSelectInfo()
  },
  methods: {
    // 构建 Tree列表
    reqBuildTreeList: function() {
      var that = this
      reqAllInfoTreeList().then(function(res) {
        if (res.code === 200) {
          var list = res.object.records || []
          that.infoTree.menus = [
            { id: 0, label: '信息分类', children: null, pid: -1 }
          ]
          list.push(that.infoTree.menus[0])
          qf.Utils.treeListBuild(list)
        }
      })
    },

    // 1.获取全部信息分类
    classification(params) {
      var typeM = this.typeManage
      var params = {
        page: typeM.page,
        pageSize: typeM.size
      }
      reqInformationTreeList({ pid: 0 }).then((res) => {
        var list = res.object.records || []
        for (var item of list) {
          item.hasChildren = !item.leaf
        }
        typeM.selectdata = list
        typeM.fromData = list
        typeM.total = res.object.total
      })
    },
    // 获取分类下拉列表
    getSelectInfo() {
      var typeM = this.typeManage
      var params = {
        page: 1,
        pageSize: 999
      }
      getAllCategory(params).then((res) => {
        var dropDown = res.object.records || []
        typeM.dropData = dropDown
      })
    },
    // 获取全部信息分类分页
    handleSizeChange(val) {
      // 每页多少条
      this.typeManage.size = val
      this.classification()
    },
    handleCurrentChange(val) {
      // 当前是多少页
      this.typeManage.page = val
      this.classification()
    },

    // 2.根据名称获取信息分类
    toSearch() {
      var typeM = this.typeManage
      var param = {
        page: this.typeManage.page,
        pageSize: this.typeManage.size
      }
      this.name && (param.name = this.name)
      var typeM = this.typeManage
      getNameCategory(param).then((res) => {
        var selectlist = res.object.records || []
        typeM.fromData = selectlist
        typeM.total = res.object.total
      })
    },
    // 新增
    addDialogData() {
      this.typeManage.addDialog = true
      this.typeManage.from.addname = ''
      this.typeManage.from.id = 0
      this.typeManage.from.test = ''
    },
    determine() {
      if (this.typeManage.flag) {
        this.typeManage.flag = 0
        this.chooseString = this.typeManage.from.test.join()
        this.$refs.addDataForm.validate((valid) => {
          if (valid) {
            var params = {
              name: this.typeManage.from.addname,
              pushNew: this.chooseString,
              pid: this.typeManage.from.id
            }

            var self = this
            addClassification(params).then(
              (res) => {
                this.typeManage.addDialog = false
                this.classification()
                setTimeout(function() {
                  self.typeManage.flag = 1
                }, 300)
                self.$message({
                  type: 'success',
                  message: '新增成功'
                })
              },
              () => {
                self.$message.error('新增失败')
              }
            )
          }
        })
      }
    },

    // 4、修改信息分类
    typeEdit(e, index, item) {
      this.typeManage.editDialog = true
      this.editFormInfo.send = item.pushnew
      this.editFormInfo.id = item.id
      this.editFormInfo.choose = this.editFormInfo.send.split(',')
      this.editFormInfo.type = item.label
      this.editFormInfo.pid = item.pid

      this.CacheItem = item
    },
    selectChange(val) {
      this.newval = val
      this.editFormInfo.send = this.newval.join()
    },
    uploadAddForm() {
      if (this.editFormInfo.flag) {
        this.editFormInfo.flag = 0
        this.$refs.editDataForm.validate((valid) => {
          if (valid) {
            var params = {
              id: this.editFormInfo.id,
              name: this.editFormInfo.type,
              pushNew: this.editFormInfo.send,
              pid: this.editFormInfo.pid
            }
            var self = this
            editClassification(params).then((res) => {
              if (res.code === 200) {
                this.typeManage.editDialog = false

                this.CacheItem.label = params.name
                this.CacheItem.pushnew = params.pushNew
                setTimeout(function() {
                  self.editFormInfo.flag = 1
                }, 300)
                // 重新构建列表
                this.classification()
              }

              // message
              self.$message(
                {
                  type: 'success',
                  message: '编辑成功'
                },
                () => {
                  self.$message.error('编辑失败')
                }
              )
            })
          }
        })
      }
    },

    // 5.删除
    typeDelete(item) {
      var id = item.id
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTypeDict({ id: id }).then(
          (res) => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.classification()
          },
          () => {
            this.$message.error('删除失败')
          }
        )
      })
    },

    getDeptDatas(tree, treeNode, resolve) {
      const params = { pid: tree.id }
      reqInformationTreeList(params).then((res) => {
        var list = res.object.records || []
        for (var item of list) {
          item.hasChildren = !item.leaf
        }
        resolve(list)
      })
    },
    // 6.查看分类人员信息
    lookClassButton(item) {
      this.lookClassData.dialogOff = true
      this.lookClassData.lookClassDataId = item.id
      this.getClassifyUser({
        page: this.lookClassData.page,
        pageSize: this.lookClassData.pageSize,
        classId: item.id
      })
    },
    // 7.人员分类信息分页
    lookClassPaginaChange(item) {
      this.getClassifyUser({
        page: item,
        pageSize: this.lookClassData.pageSize,
        classId: this.lookClassData.lookClassDataId
        document
      })
    },
    // 8.获取分类人员表格数据
    getClassifyUser(param) {
      getClassifyUserMessage(param).then((res) => {
        this.lookClassData.tableData = res.object.data
        this.lookClassData.tableTotal = res.object.total
      })
    },
    // 9.修改人员权重
    lookClassDataInputChange(item) {
      item.infoClass = this.lookClassData.lookClassDataId

      changeClassInput(item).then((res) => {})
    },
    // 加载信息分类列表
    loadInfoTreeMenus({ action, parentNode, callback }) {
      if (action === 'LOAD_CHILDREN_OPTIONS') {
        setTimeout(() => {
          callback()
        }, 100)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.datamanage-wrapper {
  width: 100%;
  height: 100%;
  padding: 10px;
  border-radius: 5px;
  background-color: #f5f6fb;
}

.search-wrapper {
  width: 100%;
  display: flex;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0px 10px 0px;
  background: #fff;
}

.table-wrapper {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0px 10px 0px;
  background: #fff;
}

.searchbtn {
  margin-left: 30px;
  padding: 6px 15px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  background-color: #13ce66;
  border-color: #13ce66;
}

.addbtn {
  margin-left: 30px;
  padding: 6px 15px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
}

.infoline {
  width: 100%;
  height: 100px;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
