<template>
  <div v-loading="loading">
    <el-form
      ref="sendForm"
      :model="sendInfo"
      class="demo-dynamic"
      label-width="110px"
    >
      <el-form-item prop="nodeName" label="标题">
        <div>{{ sendInfo.title }}</div>
      </el-form-item>
      <!-- :rules="[
          { required: false, message: `请选择通知方式`, trigger: 'blur' }
        ]" -->
      <el-form-item
        prop="notificationType"
        label="通知方式"
        v-show="notificationList.length != 0"
      >
        <el-checkbox-group
          v-model="sendInfo.notificationType"
          style="display: contents"
        >
          <el-checkbox
            v-for="item of notificationList"
            :key="item.cciValue"
            :label="item.cciValue"
            :disabled="
              readOnlyNotificationType
                ? readOnlyNotificationType.indexOf(item.cciValue) != -1
                : false
            "
          >
            {{ item.shortName }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item prop="nextNode" label="通知消息" v-show="notificationList.length != 0">
        <el-input
          type="textarea"
          autosize
          v-model="sendInfo.notificationMsg"
          :readonly="notificationMessageReadOnly"
        />
      </el-form-item>
      <el-table
        ref="multipleTable"
        :data="sendTable"
        tooltip-effect="dark"
        style="width: 100%"
        height="250"
        :cell-class-name="cellcb"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="userid" label="经办人" width="120">
        </el-table-column>
        <el-table-column prop="itemname" label="步骤" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="状态" show-overflow-tooltip>
          <template slot-scope="scope"
            ><span
              :style="`${
                scope.row.pendstate == 0
                  ? 'color:red'
                  : scope.row.pendstate == 1
                  ? 'color:green'
                  : ''
              }`"
              >{{ scope.row.querykeywords }}</span
            ></template
          >
        </el-table-column>
        <el-table-column label="日期">
          <template slot-scope="scope">{{
            scope.row.statechangetime | date
          }}</template>
        </el-table-column>
      </el-table>
      <el-form-item>
        <div style="text-align: right">
          <el-button type="primary"  @click="subMit">
            确定
          </el-button>
          <el-button @click="quit" > 取消 </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import util from 'eoss-ui/src/utils/util.js';
import { toSendMsg, sendMsg } from 'eoss-ui/src/config/api.js';
export default {
  name: 'SendMsg',
  data() {
    return {
      sendInfo: {
        title: '',
        notificationType: ['0', '3'],
        notificationMsg: ''
      },
      appId: '',
      notificationMessageReadOnly: true,
      readOnlyNotificationType: '',
      loading: false,
      pendHistoryIds: '',
      notificationList: [],
      sendTable: []
    };
  },
  props: {
    newsList: {
      type: Array,
      default: () => []
    },
    simpleTips: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    this.getSendMsg();
    this.notificationList = JSON.parse(JSON.stringify(this.newsList));
  },
  filters: {
    date(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm');
    }
  },
  methods: {
    subMit() {
      this.loading = true;
      const {
        pendHistoryIds,
        appId,
        sendInfo: { notificationMsg, notificationType }
      } = this;
      const params = {
        url: sendMsg,
        headers: { Accept: 'application/json,text/plain' },
        method: 'post',
        data: {
          pendHistoryIds,
          appId,
          notificationMsg,
          notificationType: notificationType.join(',')
        }
      };
      util
        .ajax(params)
        .then((res) => {
          const { message, status } = res;
          this.loading = false;
          if (status === 'success') {
            this.simpleTips && this.$message.success('操作成功');
            this.quit(true);
          } else {
            this.$message.error(message || '系统错误，请联系管理员！');
          }
        })
        .catch((err) => {
          this.loading = false;
          if (err.message && err.message !== 'canceled') {
            this.$message.error(err.message);
          }
        });
    },
    quit(val) {
      if (val === true) return this.$emit('cancel', val);
      this.$emit('cancel');
    },
    cellcb(row) {
      if (row.row.pendstate != 2) {
        return 'no-checked';
      }
    },
    checkList() {
      this.$nextTick(() => {
        let rows = this.sendTable.filter(
          (item, index) => item.pendstate == 2 && index == 0
        );
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      });
    },
    handleSelectionChange(val) {
      let ids = val.map((item) => {
        if (item.pendstate == 2) {
          return item.id;
        }
      });
      this.pendHistoryIds = ids.join(',');
    },
    getSendMsg() {
      this.loading = true;
      util
        .ajax({
          url: toSendMsg,
          params: { pendingId: this.$attrs.pendingId }
        })
        .then((res) => {
          const {
            status,
            message,
            data: {
              title,
              wfHistoryList,
              appId,
              notificationMessageReadOnly,
              readOnlyNotificationType
            }
          } = res;
          this.loading = false;
          if (status === 'success') {
            this.sendInfo.title = title;
            this.readOnlyNotificationType = readOnlyNotificationType;
            this.notificationMessageReadOnly =
              notificationMessageReadOnly == 'true';
            this.appId = appId;
            this.sendTable = wfHistoryList;
            this.checkList();
          } else {
            this.$message.error(message || '系统错误，请联系管理员！');
          }
        })
        .catch((err) => {
          this.loading = false;
          if (err.message && err.message !== 'canceled') {
            this.$message.error(err.message);
          }
        });
    }
  }
};
</script>

<style></style>
