<template>
    <div>
        <PageTable ref="valueSetTable" action="QueryMessageList" :columnsFn="columns" :initParam="formSearch">
            <Form :model="formSearch" ref="vsForm" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
                <Form-item prop="title" :label="$t('module.sendMessage.title')">
                    <Input type="text" v-model="formSearch.title" size="small" clearable></Input>
                </Form-item>
                <Form-item prop="sender" :label="$t('module.sendMessage.sender')">
                    <Input type="text" v-model="formSearch.sender" size="small" clearable></Input>
                </Form-item>
                <Form-item prop="recipients" :label="$t('module.sendMessage.recipient')">
                    <Input type="text" v-model="formSearch.recipients" size="small" clearable></Input>
                </Form-item>
                <Form-item prop="type" :label="$t('module.sendMessage.messageType')">
                    <Select v-model="formSearch.type" size="small" clearable>
                        <Option value="app">{{$t('module.sendMessage.CRCWorkAPP')}}</Option>
                        <Option value="sms">{{$t('module.sendMessage.SMS')}}</Option>
                        <Option value="email">{{$t('module.sendMessage.email')}}</Option>
                    </Select> 
                </Form-item>
                <Form-item prop="returnStatus" :label="$t('module.sendMessage.sendStatus')">
                    <Select v-model="formSearch.returnStatus" size="small" clearable>
                        <Option value="S">{{$t('module.sendMessage.success')}}</Option>
                        <Option value="F">{{$t('module.sendMessage.failure')}}</Option>
                    </Select> 
                </Form-item>
            </Form>
            <div slot="table-bar">
                <!-- <Button type="ghost" icon="paper-airplane" size="small" @click="sendEmail">发送邮件</Button> -->
                <Button type="ghost" icon="paper-airplane" size="small" @click="sendMessage">{{$t('module.sendMessage.sendMessage')}}</Button>
                <!-- <Button type="ghost" icon="paper-airplane" size="small" @click="sendSMS">发送短信</Button> -->
            </div>
            <div slot="handle-bar">
                <Button size="small" @click.native="searchValueSet" type="warning" icon="ios-search">{{$t("common.search")}}</Button>
                <Button size="small" @click.native="resetValueSet" type="info" icon="md-sync">{{$t("common.reset")}}</Button>
            </div>
        </PageTable>
    </div>
</template>
<script>
import SendMessage from "./SendMessage.vue";
export default {
  components: {
  },
  data() {
    return {
      formSearch: {
        title: "",
        sender: "",
        recipients: "",
        type: "",
        returnStatus: "",
      },
    };
  },
  computed: {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    columns(){
      return [
          {
            title: this.$t("module.sendMessage.index"),
            type: "index",
            width: 50,
            align: "center"
          },
          {
            title: this.$t("module.sendMessage.messageType"),
            align: "center",
            key: "type",
            width: 120,
            render: (h, params) => {
              return h(
                "span",
                this.getMessageTypeName(params.row.type)
              );
            }

          },
          {
            title: this.$t("module.sendMessage.title"),
            align: "center",
            ellipsis: true,
            width: 120,
            key: "title",
            render: (h, params) => {
              return h(
                "span",
                {
                  attrs: {
                    title: params.row.title
                  }
                },
                params.row.title
              );
            }
          },
          {
            title: this.$t("module.sendMessage.content"),
            align: "center",
            ellipsis: true,
            width: 120,
            key: "content",
            render: (h, params) => {
              return h(
                "span",
                {
                  attrs: {
                    title: params.row.content
                  }
                },
                params.row.content
              );
            }
          },
          {
            title: this.$t("module.sendMessage.extra"),
            align: "center",
            ellipsis: true,
            width: 120,
            key: "extra",
            render: (h, params) => {
              return h(
                "span",
                {
                  attrs: {
                    title: params.row.extra
                  }
                },
                params.row.extra
              );
            }
          },
          {
            title: this.$t("module.sendMessage.sender"),
            align: "center",
            width: 120,
            ellipsis: true,
            key: "sender",
            render: (h, params) => {
              return h(
                "span",
                {
                  attrs: {
                    title: params.row.sender
                  }
                },
                params.row.sender
              );
            }
          },
          {
            title: this.$t("module.sendMessage.recipient"),
            align: "center",
            width: 120,
            ellipsis: true,
            key: "recipients",
            render: (h, params) => {
              return h(
                "span",
                {
                  attrs: {
                    title: params.row.recipients
                  }
                },
                params.row.recipients
              );
            }
          },
          {
            title: this.$t("module.sendMessage.serialNumber"),
            align: "center",
            width: 120,
            ellipsis: true,
            key: "txnId",
            render: (h, params) => {
              return h(
                "span",
                {
                  attrs: {
                    title: params.row.txnId
                  }
                },
                params.row.txnId
              );
            }
          },
          {
            title: this.$t("module.sendMessage.sendStatus"),
            align: "center",
            width: 120,
            key: "returnStatus",
            render: (h, params) => {
              return h(
                "Tag",
                {
                  props: {
                    type: "dot",
                    color: params.row.returnStatus == "S" ? "blue" : "red"
                  }
                },
                params.row.returnStatus == "S" ? this.$t("module.sendMessage.success") : this.$t("module.sendMessage.failure")
              );
            }
          },
      ]
    },
    searchValueSet() {
      this.$refs["valueSetTable"].load(this.formSearch);
    },
    resetValueSet() {
      this.$refs["vsForm"].resetFields();
      this.$refs["valueSetTable"].load(this.formSearch);
    },
    sendSMS(obj) {
      new this.$pageModal(
        SendSMS,
        {
          props: {
            vsId: obj.vsId,
            version: obj.version
          }
        },
        data => {
          this.searchValueSet();
        }
      );
    },
    sendEmail(obj) {
      new this.$pageModal(
        SendEmail,
        {
          props: {
            vsId: obj.vsId,
            version: obj.version
          }
        },
        data => {
          this.searchValueSet();
        }
      );
    },
    sendMessage(obj) {
      new this.$pageModal(
        SendMessage,
        {
          props: {
            vsId: obj.vsId,
            version: obj.version
          }
        },
        data => {
          this.searchValueSet();
        }
      );
    },
    getIdAndVersion() {
      let list = this.$refs["valueSetTable"].getSelectioned() || [];
      let ids = [];
      for (let vs of list) {
        ids.push({ vsId: vs.vsId, version: vs.version });
      }
      return ids;
    },
    getMessageTypeName(type){
      if(type == "sms"){
        return "短信"
      }else if(type == "email"){
        return "邮件"
      }else if(type == "app"){
        return "润工作"
      }else{
        return ""
      }
    }
  },
  watch: {},
  
  directives: {}
};
</script>
