<!-- 工作流组件 -->
<template>
  <div>
    <Modal
      v-model="$store.state.workflowModal"
      title="工作流"
      width="500"
      :mask-closable="false"
      :closable="false">
      <div class="workflow-con">
        <div class="workflow-title">
          <span class="workflow-title-r">已选：<span>{{ selectName }}</span></span>
        </div>

        <ul class="workflow-ul">
          <li v-for="item in userListData" @click="workflowSelect(item.id, item.text ? item.text : item.username, item.username)" :key="item.id" :class="{'workflow-li-sed': item.id === selectId}">
            <span class="st-icons st-icons-peoples "></span>{{ item.text ? item.text : item.username }}
          </li>
        </ul>
      </div>
      <div slot="footer" style="padding-right: 20px;">
        <span v-show="!selectId" class="workflow-footer-msg">请选择审批人！</span>
        <!--取消会出现当前审批人同意但是下一个审批人无法添加的情况，临时注释-->
        <!--<Button type="ghost" @click="workflowCancel" :disabled="workflowCancelDisabled">取消</Button>-->
        <Button type="primary" :loading="workflowModalLoading" @click="workflowSubmit">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {trimStr} from '@/config/utils.js';
let searchValue = '', searchTimeout = null;
// workflow
export default {
  data () {
    return {
      workflowModalLoading: false,
      workflowCancelDisabled: false,
      searchName: '',
      selectName: '',
      selectId: '',
      userListData: [],
      isNotice: '1'
    }
  },
  computed: {
    workflowDataList () {
      return this.$store.state.workflowData.list
    }
  },
  watch: {
    workflowDataList () {
      this.searchName = '';
      searchValue = '';
      this.userListData = this.workflowDataList;
    }
  },
  methods: {
    doKeySearch () {
      let _this = this;
      if (!_this.searchName) { _this.searchName = ''; }
      _this.searchName = trimStr(_this.searchName);
      if (_this.searchName === searchValue) { return; }
      if (searchTimeout) { clearTimeout(searchTimeout); }
      let reg = /^[a-zA-Z0-9_\-\u4e00-\u9fa5]+$/;
      if (reg.test(_this.searchName) || _this.searchName === '') {
        searchTimeout = setTimeout(function () {
          _this.doSearchUser(_this.searchName);
        }, 600);
      }
    },
    doSearch () {
      let _this = this;
      if (!_this.searchName) { _this.searchName = ''; }
      _this.searchName = trimStr(_this.searchName);
      if (_this.searchName === searchValue) { return; }
      let reg = /^[a-zA-Z0-9_\-\u4e00-\u9fa5]+$/;
      if (reg.test(_this.searchName) || _this.searchName === '') {
        if (searchTimeout) { clearTimeout(searchTimeout); }
        _this.doSearchUser(_this.searchName);
      }
    },
    doSearchUser (sval) {
      searchValue = sval;
      if (sval) {
        this.userListData = this.workflowDataList.concat([]).filter((x) => {
          return x.text.indexOf(sval) >= 0;
        });
      } else {
        this.userListData = this.workflowDataList.concat([]);
      }
    },
    // 工作流组件重置
    resetWorkflow (flag) {
      this.workflowModalLoading = false;
      this.workflowCancelDisabled = false;
      this.$store.state.workflowModal = false;
      this.searchName = '';
      this.selectName = '';
      this.selectId = '';
      if (flag) {
        this.$store.commit('setWorkflowData', {
          workflowData: {
            option_no: '',
            option_type: '',
            list: [],
            workflowCallback: null
          }
        });
      }
    },
    // 工作流取消
    workflowCancel () {
      let _this = this;
      _this.$store.state.workflowModal = false;
      if (_this.$store.state.workflowData.workflowCallback) {
        setTimeout(() => {
          _this.$store.state.workflowData.workflowCallback();
          _this.resetWorkflow(true);
        }, 100);
      }
    },
    // 工作流提交
    workflowSubmit (data) {
      let _this = this;
      if (!_this.selectId) {
        return;
      }
      _this.workflowCancelDisabled = true;
      _this.workflowModalLoading = true;
      if (_this.isNotice === '1') {
        _this.axios.post('/OaApproverService/doSelectMan',
          [{
            person_no: _this.selectId,
            person_name: _this.selectName,
            option_no: _this.$store.state.workflowData.option_no,
            option_type: _this.$store.state.workflowData.option_type
          }]
        ).then(function (response) {
          if (response) {
            // 执行回调
            if (_this.$store.state.workflowData.workflowCallback) {
              setTimeout(() => {
                _this.$store.state.workflowData.workflowCallback();
              }, 100);
            }
          }
          _this.resetWorkflow();
        }).catch(function () {
          _this.resetWorkflow();
        });
      } else if (_this.isNotice === '2') {
        _this.axios.post('/OaNoticeService/doSelectWeb',
          [{
            check_man_no: _this.selectId,
            check_man_name: _this.selectName,
            notice_no: _this.$store.state.workflowData.option_no
          }]
        ).then(function (response) {
          if (response) {
            // 执行回调
            if (_this.$store.state.workflowData.workflowCallback) {
              setTimeout(() => {
                _this.$store.state.workflowData.workflowCallback();
              }, 100);
            }
          }
          _this.resetWorkflow();
        }).catch(function () {
          _this.resetWorkflow();
        });
      } else if (_this.isNotice === '2') {
        _this.axios.post('/OaNoticeService/doSelectWeb',
          [{
            check_man_no: _this.selectId,
            check_man_name: _this.selectName,
            notice_no: _this.$store.state.workflowData.option_no
          }]
        ).then(function (response) {
          if (response) {
            // 执行回调
            if (_this.$store.state.workflowData.workflowCallback) {
              setTimeout(() => {
                _this.$store.state.workflowData.workflowCallback();
                _this.resetWorkflow();
              }, 100);
            }
          }
        }).catch(function () {
          _this.resetWorkflow();
        });
      }
    },
    // 选人
    workflowSelect (id, text, data) {
      this.selectId = id;
      this.selectName = text;
      if (data) {
        this.isNotice = '2';
      } else {
        this.isNotice = '1';
      }
    }
  }
}
</script>
<style scoped>
  .workflow-con {
    position: relative;
    padding: 0 20px;
  }
  .workflow-title {
    position: absolute; top: 0; left: 0; z-index: 1000;
    height: 40px; width: 100%;
    padding-left: 20px;
    background-color: #fff;
    border-bottom: 1px solid #f6f6f6;
  }
  .workflow-title-r {
    display: inline-block;
    position: relative; top: 3px;
    margin-left: 20px;
    font-size: 14px;
    color: #666;
  }
  .workflow-title-r > span { color: #333; }
  .workflow-ul {
    padding-top: 45px;
    max-height: 500px; min-height: 200px;
    overflow: auto; color: #666;
  }
  .workflow-ul > li {
    height: 36px; line-height: 36px; vertical-align: middle;
    position: relative;
    padding-left: 40px;
    border-radius: 4px;
    border-bottom: 1px dotted #ccc;
    font-size: 14px;
    cursor: pointer;
  }
  .workflow-li-sed { background-color: #eee !important; color: #ed3f14; cursor: default !important; }
  .workflow-ul .st-icons-peoples {
    position: absolute; top: 8px; left: 10px;
  }
  .workflow-footer-msg {
    float: left;
    color: #ff474f;
    padding-left: 20px;
    font-size: 14px;
  }
</style>
