<template>
  <div id="warn-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col :span="24" class="one_1"> 最新警告信息<el-button type="primary" size="mini" @click="toHistory()">历史信息</el-button> </el-col>
          <el-col :span="24" class="one_2">
            <el-table :data="list" border style="width: 100%" @row-click="toSendMessage">
              <el-table-column prop="warning_date" label="警告时间" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="name" label="保安员" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="company" label="企业名称" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="desc" label="描述" align="center" show-overflow-tooltip> </el-table-column>
            </el-table>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
    <el-drawer title="发送消息" :visible.sync="show" :modal="false" direction="rtl" :destroy-on-close="true" :append-to-body="true" @close="toClose">
      <el-col :span="24" class="drawer_1">
        <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="form.content" placeholder="请输入要发送的内容" :rows="5"></el-input>
          </el-col>
        </el-col>
        <el-col :span="24" class="btn">
          <el-button type="primary" size="mini" @click="sendMessage()">提交发送</el-button>
          <el-button type="danger" size="mini" @click="toClose()">取消发送</el-button>
        </el-col>
      </el-col>
    </el-drawer>
  </div>
</template>

<script>
import { EventBus } from '../eventBus';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: baoan_work_warning } = createNamespacedHelpers('baoan_work_warning');
const { mapActions: company_base } = createNamespacedHelpers('company_base');
const { mapActions: message } = createNamespacedHelpers('message');
export default {
  name: 'warn-1',
  props: {
    typeInfo: { type: Object },
    companyInfo: { type: Object },
  },
  components: {},
  data: function () {
    return {
      list: [],
      show: false,
      form: {},
    };
  },
  created() {
    const that = this;
    that.search();
    setInterval(function () {
      that.search();
    }, 20000);
  },
  mounted() {
    this.connectBus();
  },
  methods: {
    ...baoan_work_warning(['query']),
    ...company_base({ oneQuery: 'query' }),
    ...message(['sendWxMessage']),
    async search({ skip = 0, limit = 3, purpose, company_id, ...info } = {}) {
      if (purpose) {
        let data = [];
        let p1 = await this.oneQuery({ purpose_id: purpose, ...info });
        if (this.$checkRes(p1)) {
          for (const val of p1.data) {
            let p2 = await this.query({ limit, company_id: val.id });
            data.push(...p2.data);
          }
        }
        this.$set(this, `list`, data);
      } else if (company_id) {
        let res = await this.query({ limit, company_id: company_id, ...info });
        if (this.$checkRes(res)) {
          this.$set(this, `list`, res.data);
        }
      } else {
        let res = await this.query({ skip, limit, ...info });
        if (this.$checkRes(res)) this.$set(this, `list`, res.data);
      }
    },
    async sendMessage() {
      const obj = this.form;
      const res = await this.sendWxMessage(obj);
      if (this.$checkRes(res, '消息发送成功', res.msg || '消息发送失败')) {
        this.toClose();
      }
    },
    // 历史信息
    toHistory() {
      this.$emit('toHistory');
    },
    toSendMessage(row) {
      const { security_guard_id } = row;
      if (!security_guard_id) {
        this.$message.error('缺少保安信息,无法发送信息!');
        return;
      }
      this.form.user_ids = [security_guard_id];
      this.show = true;
    },
    toClose() {
      this.show = false;
      this.form = {};
    },
    // 建立总线监听函数
    connectBus() {
      EventBus.$on('toLinkage', (data) => {
        console.log(data);
        this.search(data);
      });
      EventBus.$on('backToInit', (data) => {
        console.log(data);
        this.search(data);
      });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    // typeInfo: {
    //   deep: true,
    //   immediate: true,
    //   handler(val, oval) {
    //     let toSearch = false;
    //     if (!oval) toSearch = true;
    //     else {
    //       const okeys = Object.keys(oval);
    //       const keys = Object.keys(val);
    //       if (okeys.length == 0 && keys.length > 0) toSearch = true;
    //       else if (okeys.length > 0 && keys.length === 0) toSearch = true;
    //     }
    //     if (toSearch) this.search({ purpose: val.purpose_id });
    //   },
    // },
    // companyInfo: {
    //   deep: true,
    //   immediate: true,
    //   handler(val, oval) {
    //     let toSearch = false;
    //     if (!oval) toSearch = true;
    //     else {
    //       const okeys = Object.keys(oval);
    //       const keys = Object.keys(val);
    //       if (okeys.length == 0 && keys.length > 0) toSearch = true;
    //       else if (okeys.length > 0 && keys.length === 0) toSearch = true;
    //       else toSearch = !_.isEqual(_.get(val, 'id'), _.get(oval, 'id'));
    //     }
    //     if (toSearch) this.search({ company_id: val.id });
    //   },
    // },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .one_1 {
      color: #000;
      font-size: 2vmin;
      font-weight: 700;
      position: relative;
      border-bottom: 2px solid #2441a9;
      line-height: 2.96875vw;
      text-align: left;
      .el-button {
        margin: 0 0 0 10px;
        background-color: #2441a9;
        // color: #2441a9;
      }
      .el-button:hover {
        color: #fff;
      }
    }
    .one_1::before {
      background: #2441a9;
      border-radius: 50%;
      content: '';
      width: 6px;
      height: 6px;
      position: absolute;
      right: -2px;
      bottom: -4px;
      z-index: 1;
      visibility: visible;
    }
    .one_2 {
      background: #2441a9;
      /deep/.el-table {
        color: #ffffff;
        background-color: transparent;
        max-height: 10.1vw;
        overflow: auto;
      }
      /deep/.el-table thead {
        color: #ffffff;
      }
      /deep/.el-table tr {
        background-color: transparent;
      }

      /deep/.el-table__body tr:hover > td {
        background-color: #112473 !important;
      }

      /deep/.el-table__body tr.current-row > td {
        background-color: #112473 !important;
      }

      /deep/.el-table th {
        background-color: transparent !important;
      }
    }
  }
}
.drawer_1 {
  .content {
    .label {
      font-size: 16px;
      margin: 0 0 10px 0;
    }
  }
  .btn {
    text-align: center;
    margin: 10px 0;
  }
}
/deep/.el-drawer__header {
  margin: 0;
}
</style>
