<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-else-if="(x.DictKey == 'Notice_BaseKey'||x.DictKey == 'Scroll_Notice'||x.DictKey == 'Goods_OrderNotice') && x.EditorStatus"
            :dict="x"
            :multiple="false"
          ></dictSelectEmp>
          <dictSelectEmp
            @blur="changeFinishModel"
            v-else-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.DictKey == 'Applet_Push_AuditEmp') &&
                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>
