<template>
  <el-dialog
    title="沟通设置"
    :visible.sync="commuDialog"
    :close-on-click-modal="false"
  >
    <table cellspacing="0" cellpadding="0" border="0" class="form-table">
      <tbody>
        <tr>
          <th style="width: 100px;">
            <span class="xh-star">*</span>沟通人员：
          </th>
          <td>
            <ht-user-selector v-model="users" permission="w"/>
          </td>
        </tr>
        <tr>
          <th style="width: 100px;">
            <span class="xh-star">*</span>沟通内容：
          </th>
          <td colspan="3">
            <OpinionText  ref="opinionText"/>
          </td>
        </tr>
        <tr>
          <th style="width: 100px;">附件上传：</th>
          <td colspan="3">
            <FileUpload ref="fileUpload"/>
          </td>
        </tr>
      </tbody>
    </table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm" size="small">确 定</el-button>
      <el-button @click="cancel" size="small">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from "vuex";
import OpinionText from "@/components/common/opinionText.vue";
import FileUpload from "@/components/common/fileUpload.vue";
import HtUserSelector from "@/components/control/HtUserSelector.vue";
import { Message } from "element-ui";
import utils from "@/utils.js";
export default {
  name: "taskToCommu",
  props: ["instId","defId"],
  components: { OpinionText,FileUpload,HtUserSelector},

  data() {
    return {
        commuDialog: false,
        users:""
    };
  },
  computed: mapState({
    rows: state => state.storeProcess.rows
  }),
  methods: {
    //鼠标点击页面其他其他位置不关闭弹框
    handleClose(done) {
        this.commuDialog = true;
    },
    //取消
    cancel() {
        this.commuDialog = false;
    },
    //确认
    confirm() {
      if(this.users=="" || this.users==null){
         Message.warning("请选择沟通人员");
         return;
      }else if(this.$refs.opinionText.getOpinion()==""){
        Message.warning("请填写沟通内容");
        return;
      };
      let userId = "";
      for(var i = 0;i<this.users.length;i++){
          userId = userId+this.users[i].id+",";
      }
      userId = userId.substring(0,userId.length-1);
      let files ="";
      if(this.$refs.fileUpload.getFiles()!=""){
        files = JSON.stringify(this.$refs.fileUpload.getFiles())
      }
      let data = {"opinion":this.$refs.opinionText.getOpinion(),"userId":userId,"instId":this.instId,"defId":this.defId,"files":files};
      if (data.opinion.length > 500) {
        data.opinion = data.opinion.substring(0,500);
      }
      this.$store.dispatch("storeProcess/communicate",data).then(()=>{
           this.commuDialog = false;
           utils.reload();
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.el-dialog__footer {
    padding: 10px 20px;
    padding-top: 10px;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.form-table {
  width: 100%;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
}

.form-table th {
  text-align: right;
  color: #666;
}

.form-table th > span {
  color: #f00;
}

.form-table th, .form-table td {
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  padding: 10px;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

.xh-star {
  color: red;
}
</style>
