<template>
  <div class="p_all_20">
    <div>
      <div class="top">商家消息管理</div>
      <el-divider></el-divider>
      <el-table :data="tableData" style="width: 100%" class="messagebox">
        <el-table-column prop="actionType " label="信息项目" align="center">
          <template slot-scope="scope">
            <p v-if="scope.row.actionType==3" class="type-txt"><img class="typeIco" src="@/assets/img/icons/success.png" alt=""> 买家付款成功</p>
            <p v-if="scope.row.actionType==4" class="type-txt"><img class="typeIco" src="@/assets/img/icons/gift.png" alt=""> 买家确认收货</p>
          </template>
        </el-table-column>
        <el-table-column prop="actionType" label="项目说明" align="center">
          <template slot-scope="scope">
            <p v-if="scope.row.actionType==3">当订单支付成功时候的消息通知</p>
            <p v-if="scope.row.actionType==4">当订买家签收货物时候的消息通知</p>
          </template>
        </el-table-column>
        <el-table-column prop label="是否发送给自己" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.myself"
              :inactive-value="0"
              :active-value="1"
              active-color="#13ce66"
              @change="onCCMyself((scope.row))"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="抄送给同事" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleList(scope.row.actionId,scope.row.actionType)">抄送列表</el-button>
            <el-button type="primary" @click="add(scope.row.actionId)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="copy-list" v-if="showCcList">
      <p class="title">
        <span>{{titShow}}（E淘商城）</span> 抄送列表
      </p>
      <el-table :data="ccList" style="width: 100%" v-loading="ccListLoading">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="手机号码"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="onEditCC(scope.$index,scope.row)">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-delete"
              @click="onDelCC(scope.$index,scope.row.actionInfoId)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="ccText" :visible.sync="dialogTableVisible"  width="520px">
      <div class="form-input-box">
        <div class="form-input-item">
          <span class="name colorred">*姓名：</span>
          <el-input class="form-input" placeholder="请输入姓名" v-model="form.name"></el-input>
        </div>
        <div class="form-input-item">
          <span class="name colorred">*手机号码：</span>
          <el-input
            class="form-input"
            placeholder="请输入手机号码"
            @input="onInputPhone"
            v-model="form.phone"
          ></el-input>
        </div>
        <div class="form-input-item">
          <span class="name">邮箱：</span>
          <el-input class="form-input" placeholder="请输入邮箱" v-model="form.email"></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { _regMobile, _regEmail } from "@/utils/utils";
export default {
  data() {
    return {
      ccText:'',
      ccListLoading: false,
      currentSctionId: "",
      dialogTableVisible: false,
      form: {
        name: "",
        phone: "",
        email: "",
        actionId: ""
      },
      showCcList: false,
      ccList: [],
      tableData: [],
      gridData: [],
      titShow:'买家付款成功'
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    onCCMyself(row) {
      var status = row.myself;
      var actionId = row.actionId;
      this.$axios
        .post("/msg/setting", {
          actionId,
          status
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.message
            });
          } else {
            row.myself=status==1?0:1;
            this.$message({
              message: res.data.message,
              type: "error"
            });
          }
        });
    },
    onDelCC(index, actionInfoId) {
      this.$confirm("确认删除当前信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ccListLoading = true;
          this.$axios
            .delete("/msg/member/"+actionInfoId)
            .then(res => {
              this.ccListLoading = false;
              if (res.data.code == 200) {
                this.handleList(this.currentSctionId);
                this.$message({
                  type: "success",
                  message: res.data.message
                });
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
              }
            });
        })
        .catch(() => {});
    },
    onEditCC(index, row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.form.type = 1;
      this.dialogTableVisible = true;
      this.ccText="编辑抄送";
    },
    onInputPhone(e) {
      if (e.length >= 11) {
        this.form.phone = this.form.phone.substring(0, 11);
      }
    },
    onSure() {
      var form = this.form;
      if (!form.name||form.name == "") {
        this.$message({
          message: "请输入姓名",
          type: "warning"
        });
        return false;
      }
      if (!form.phone||form.phone == "") {
        this.$message({
          message: "请输入手机号",
          type: "warning"
        });
        return false;
      }
      if (!_regMobile(form.phone)) {
        this.$message({
          message: "请输入正确手机号",
          type: "warning"
        });
        return false;
      }
      if (!_regEmail(form.email) && form.email && form.email.trim() != "") {
        this.$message({
          message: "请输入正确邮箱",
          type: "warning"
        });
        return false;
      }
      var url = "";
      if (form.type == 1) {
        url = "/msg/member/modify";
      } else {
        url = "/msg/member/add";
      }
      this.$axios.post(url, form).then(res => {
        if (res.data.code == 200) {
          this.dialogTableVisible = false;
          this.form = {};
          this.$message({
            type: "success",
            message: res.data.message
          });
          if (
            this.currentSctionId &&
            (this.currentSctionId == form.actionId || form.type == 1)
          ) {
            this.handleList(this.currentSctionId);
          }
        } else {
          this.$message.error(res.data.message);
        }
      });
    },

    add(actionId) {
      this.form = {};
      this.form.actionId = actionId;
      this.form.type = 0;
      this.dialogTableVisible = true;
      this.ccText="添加抄送";
    },
    handleList(actionId,acttype) {
      if(acttype==3){
        this.titShow = '买家付款成功'
      }else{
        this.titShow = '买家确认收货'
      }
      this.showCcList = true;
      this.ccListLoading = true;
      this.$axios
        .get("/msg/member/list?actionId=" + actionId)
        .then(res => {
          this.ccListLoading = false;
          if (res.data.code == 200) {
            this.currentSctionId = actionId;
            var data = res.data.data;
            this.ccList = data;
          }
        })
        .catch(() => {
          this.ccListLoading = false;
        });
    },
    getTableData() {
      this.$axios.get("/msg/setting?sysType=4").then(res => {
        if (res.data.code == 200) {
          var data = res.data.data;
          this.tableData = data;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.messagebox{
  /deep/ .has-gutter{
    color: #333;
  }
}

.type-txt{
  font-weight: bold;
}
.typeIco{
  vertical-align: middle;
  padding-right: 10px;
}
.top{
  font-size: 16px;
  font-weight: bold;
  // padding-bottom: 30px;
}
.form-input-box {
  text-align: center;
  .form-input-item {
    // min-width: 400px;
    margin-bottom: 20px;
  }
  .name {
    display: inline-block;
    width: 80px;
    text-align: right;
  }
  .form-input {
    width: 70%;
  }
}
.colorred{color: red;}
.copy-list {
  margin-top: 50px;
  .title {
    span {
      color: #409eff;
      font-weight: bold;
    }
  }
}
</style>