<style>
  .baseSet_Title {
    width: 120px !important;
    padding: 18px 0 0 16px;
    text-align: right;
  }

</style>
<template>
  <div class="page-body">
    <!-- <div class="col row wrap">
      <div class="col-2 baseSet_Title">
        公告审批人：
      </div>
      <div class="col-3">
        <q-select option-value="Id" option-label="EmployeeName" color="primary" filled
          :rules="[val => !!val|| '请选择公告审批人']" v-model="msg.Content" use-input clearable @filter="filterFn"
          :options="EmployeeListOption" emit-value map-options ref="Admin">
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey">
                未找到相关数据
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
      <div class="col-3" style="padding:18px 0 0 10px;color:gray">
      </div>
    </div>
    <div class="col row wrap">
      <div class="col-2 baseSet_Title">
        学员缺勤推送：
      </div>
      <div class="col-3">
        <q-select option-value="Id" option-label="EmployeeName" color="primary" filled
          :rules="[val => !!val|| '请选择学员缺勤推送人员']" v-model="msg.Content" use-input clearable @filter="filterFn"
          :options="EmployeeListOption" emit-value map-options ref="Admin">
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey">
                未找到相关数据
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
      <div class="col-3" style="padding:18px 0 0 10px;color:gray">
      </div>
    </div>
    <div class="col row wrap">
      <div class="col-2 baseSet_Title">
      </div>
      <div class="col-3">
        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important;margin-top:20px;width:100%;"
          @click="saveInfo" />
      </div>
    </div>-->
    <div class="text-h5 text-weight-medium q-mb-lg">系统字典维护</div>
    <div class="row q-col-gutter-xs q-px-lg">
      <div class="col-6 relative-position " :class="{'dict-item':!x.EditorStatus}" v-for="(x,i) in dictList" :key="i">
        <div class="edit-box" >
          <q-avatar rounded size="24px" color="orange" @click="changeStatus(x)">
            <q-icon size="18" color="white" name="iconfont icon-edit"></q-icon>
          </q-avatar>
        </div>
        <div style="max-width:300px">
          <q-field v-if="!x.EditorStatus" borderless :label="x.Name" v-model="x.Mask" readonly>
            <span class="text-dark text-weight-medium">{{x.Mask}}</span>
          </q-field>
          <dictSelectEmp @blur="changeFinishModel" v-if="x.DictKey=='Notice_BaseKey' && x.EditorStatus" :dict="x" :multiple="false"></dictSelectEmp>
          <dictSelectEmp @blur="changeFinishModel" v-if="(x.DictKey=='Push_Absence'||x.DictKey=='Push_Arrears'||x.DictKey=='Push_EndClass'||x.DictKey=='Push_NewOrder'||x.DictKey=='Push_TeachPreparing'||x.DictKey=='Push_ClassEnd') && x.EditorStatus" :dict="x" :multiple="true"></dictSelectEmp>
          <q-input @blur="changeModel(x)" :rules="[val => !!val|| '请填写字典值']" filled v-else-if="x.EditorStatus" borderless :label="x.Name" v-model="x.Content"></q-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import dictSelectEmp from '../../components/system/dict-select-emp'
  import {
    queryEmployee
  } from '../../api/users/user'; //获取业务员
  import {
    setConten,
    getConten,
    getDictList,
    saveDict
  } from "../../api/system/notiveSysSet"
  export default {
    meta: {
      title: "公告系统设置"
    },
    props: {},
    components: {
      dictSelectEmp
    },
    data() {
      return {
        msg: {
          Content: 0
        },
        EmployeeListOption: [],
        allEmployeeListOption: [],
        dictList:[]
      }
    },
    created() {},
    mounted() {
      this.getEmployee(0);
      this.init();
    },
    methods: {
      changeModel(x){
        if(x.Content!=''){
          x.Mask=x.Content
          this.changeStatus(x)
          saveDict(x).then(r=>{});
        }
      },
      changeFinishModel(x){
        this.changeStatus(x)
        saveDict(x).then(r=>{});
      },
      changeStatus(x){
        x.EditorStatus=!x.EditorStatus
       
        this.$forceUpdate()
      },
      init(){
        getDictList({}).then(r=>{
          
          r.Data.forEach(x=>{
            if(!x.Mask||x.Mask==''){
              x.Mask=x.Content==""?"未设定":x.Content
            }
            x.EditorStatus=false
          })
          this.dictList=r.Data
        })
      },
      //获取业务员
      getEmployee(id) {
        var qMsg = {
          Dept_Id: 0
        }
        qMsg.Dept_Id = id;
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            this.EmployeeListOption = res.Data;
            this.allEmployeeListOption = res.Data;
          }
        }).catch(() => {})
      },
      //筛选员工
      filterFn(val, update) {
        update(() => {
          if (val === '') {
            this.EmployeeListOption = JSON.parse(JSON.stringify(this.allEmployeeListOption))
          } else {
            const needle = val.toLowerCase();
            this.EmployeeListOption = this.allEmployeeListOption.filter(v => v.EmployeeName.toLowerCase().indexOf(
              needle) > -1);
          }
        })
      },
      getData() {
        getConten({}).then(res => {
          if (res.Code === 1) {
            this.msg.Content = parseInt(res.Data.Content)
          }
        })
      },
      saveInfo() {
        this.$refs.Admin.validate();
        if (!this.$refs.Admin.hasError) {
          setConten(this.msg).then(res => {
            if (res.Code === 1) {
              this.$message.success('操作成功')
              this.getConten();
            } else {
              this.$message.error(res.Message)
            }
          })
        }
      }
    },
  }

</script>
<style>
  .dict-item:hover .edit-box{
    display: block;
  }
  .edit-box{
    position: absolute;
    left: 256px;
    top: 20px;
    display: none;
    cursor: pointer;
    z-index: 9;
  }
</style>
