<template>
  <div style="padding: 0 10px">
    <el-row class="msg__row">
      <el-col :span="24" class="one">
        <el-col :span="24" class="content">
          <el-col :span="24" class="value">
            <span>所属企业：</span>
            <el-autocomplete
              v-model="autoSearch.company"
              :fetch-suggestions="(qs, cb) => querySearch(qs, cb, 'company')"
              placeholder="请输入所属企业"
              value-key="company"
              @select="(select) => handleSelect(select, 'company')"
            >
            </el-autocomplete>
          </el-col>
        </el-col>
        <el-col :span="24" class="content">
          <el-col :span="24" class="value">
            <span>服务对象：</span>
            <el-autocomplete
              v-model="autoSearch.service"
              :fetch-suggestions="(qs, cb) => querySearch(qs, cb, 'service')"
              placeholder="请输入所属服务对象"
              value-key="name"
              @select="(select) => handleSelect(select, 'service')"
            ></el-autocomplete>
          </el-col>
        </el-col>
        <el-col :span="24" class="btn">
          <el-button type="primary" size="mini" @click="search()">提交查询</el-button>
        </el-col>
      </el-col>
      <el-col :span="24" class="two">
        <el-col :span="24" class="two_1">
          <el-table :data="list" border @selection-change="handleSelectionChange" row-key="user_id">
            <el-table-column align="center" type="selection"></el-table-column>
            <el-table-column align="center" label="保安员编号" prop="baoan_num"></el-table-column>
            <el-table-column align="center" label="姓名" prop="name"></el-table-column>
            <el-table-column align="center" label="联系电话" prop="phone"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24" class="page">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="total"
            :page-size="limit"
            :current-page.sync="currentPage"
            @current-change="changePage"
          >
          </el-pagination>
        </el-col>
      </el-col>
      <el-col :span="24" class="thr">
        <el-col :span="24" class="content">
          <el-col :span="24" class="label">发送内容：</el-col>
          <el-col :span="24" class="value">
            <el-input type="textarea" v-model="content" placeholder="请输入要发送的内容" :rows="5"></el-input>
          </el-col>
        </el-col>
        <el-col :span="24" class="btn">
          <el-button type="primary" size="mini" @click="toSendMessage">发送</el-button>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { EventBus } from '../eventBus';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('position');
const { mapActions: message } = createNamespacedHelpers('message');
const { mapActions: companyBase } = createNamespacedHelpers('company_base');
const { mapActions: companyServiceObject } = createNamespacedHelpers('company_service_object');
const { mapActions: companyBaoanDispatch } = createNamespacedHelpers('company_baoan_dispatch');
const _ = require('lodash');
export default {
  name: 'send-message',
  props: {
    // id: { type: String, required: true },
  },
  components: {},
  data: function () {
    return {
      list: [],
      total: 0,
      limit: 5,
      currentPage: 1,
      selection: [],
      content: undefined,
      searchInfo: {},
      autoSearch: {},
      companyList: [],
      serviceList: [],
    };
  },
  created() {},
  mounted() {},
  methods: {
    ...mapActions(['queryMap']),
    ...message(['sendWxMessage']),
    ...companyServiceObject({ serviceQuery: 'query' }),
    ...companyBase({ companyQuery: 'query' }),
    ...companyBaoanDispatch({ getBaoAn: 'query' }),
    async search({ skip = 0, limit = this.limit } = {}) {
      this.checkProp();
      const query = { skip, limit, ...this.searchInfo };
      const res = await this.getBaoAn({ skip, limit, status: '0', ...query });
      if (this.$checkRes(res)) {
        this.$set(this, 'list', res.data);
        this.$set(this, 'total', res.total);
      }
    },
    async toSendMessage() {
      if (!this.content || this.content === '') {
        this.$message.error('请输入要发送的内容');
        return;
      }
      if (this.selection.length <= 0) {
        this.$message.error('请选择要发送的保安员');
        return;
      }
      const user_ids = this.selection.map((i) => i.security_guard_id);
      const obj = { content: this.content, user_ids };
      // TODO 发送消息
      const res = await this.sendWxMessage(obj);
      if (this.$checkRes(res, '消息发送成功', res.msg || '消息发送失败')) {
        this.content = undefined;
        this.selection = [];
        this.handleSelectionChange([]);
        this.$emit('close');
      }
    },
    handleSelectionChange(val) {
      this.selection = val;
      const user_ids = val.map((i) => i.user_id);
      // 修改图标
      EventBus.$emit('sendMessagePerson', user_ids);
    },
    /**
     * 查询条件的选项查询
     * @param {String} qs 输入的字符串
     * @param {Function} cb callback回调函数
     * @param {String} type 企业/服务对象
     */
    async querySearch(qs, cb, type) {
      const query = {};
      if (type === 'company') query.company = qs;
      else query.name = qs;
      const res = await this[`${type}Query`](query);
      if (!qs) this.$set(this, `${type}List`, res.data || []);
      cb(res.data || []);
    },

    handleSelect(select, type) {
      if (type === 'company') this.searchInfo['company_id'] = select.id;
      else this.searchInfo['service_target_id'] = select.id;
    },
    checkProp() {
      if (!_.get(this.searchInfo, 'company_id') || _.get(this.searchInfo, 'company_id') === '') {
        const autoData = this.autoSearch['company'];
        if (autoData) {
          const r = this.companyList.find((f) => f.company === autoData);
          if (r) this.searchInfo.company_id = r.id;
        } else delete this.searchInfo.company_id;
      }

      if (!_.get(this.searchInfo, 'service_target_id') || _.get(this.searchInfo, 'service_target_id') === '') {
        const autoData = this.autoSearch['name'];
        if (autoData) {
          const r = this.companyList.find((f) => f.name === autoData);
          if (r) this.searchInfo.service_target_id = r.id;
        } else delete this.searchInfo.service_target_id;
      }
    },
    changePage(page = this.currentPage) {
      this.search({ skip: page, limit: this.limit });
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.msg__row {
  .one {
    margin: 0 0 10px 0;
    .btn {
      text-align: center;
    }
  }
  .two {
    margin: 0 0 10px 0;
    .two_1 {
      margin: 0 0 10px 0;
    }
    .page {
      text-align: right;
    }
  }
  .thr {
    .content {
      .label {
        font-size: 16px;
        margin: 0 0 10px 0;
      }
    }
    .btn {
      text-align: center;
      margin: 10px 0;
    }
  }
  // .el-col:nth-child(1) {
  //   margin-top: 5px;
  //   .el-autocomplete {
  //     width: 70%;
  //   }
  //   span {
  //     margin: 10px;
  //   }
  // }
  // .el-col:nth-child(2) {
  //   margin-top: 5px;
  //   .el-autocomplete {
  //     width: 70%;
  //   }
  //   span {
  //     margin: 0 10px;
  //   }
  // }
  // .el-col:nth-child(3) {
  //   margin-top: 20px;
  // }
  // .el-col:nth-child(4) {
  //   margin-top: 20px;
  // }
}
/deep/.el-autocomplete {
  width: 80%;
}
</style>
