<template>
  <div class="container special-dlg-container">
    <el-dialog title="新建专栏作者" :visible.sync="addAuthorDlgVisible" width="500px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseAuthor">
      <el-autocomplete
        class="inline-input"
        style="width: 100%; margin-bottom: 20px"
        v-model="keyAuthor"
        :fetch-suggestions="querySearchHandler"
        @blur="changeHandler"
        @select="selectCompany"
        placeholder="请输入客户姓名"
        :trigger-on-focus="false"
      ></el-autocomplete>
      <p v-show="!isShowKey" style="color: #f00">系统中无此人，请先将其添加到对应公司的联系人列表下</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseAuthor">取 消</el-button>
        <el-button type="primary" @click="addAuthorHandler">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="驳回" :visible.sync="submitRejectDlgVisible" width="500px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseReject">
      <el-input type="textarea" :rows="4" style="margin-bottom: 20px" v-model.trim="textReject" placeholder="请输入驳回原因"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseReject">取 消</el-button>
        <el-button type="primary" @click="submitRejectHandler">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
export default {
  name: "",
  components: {},
  props: {
    addAuthorDlgVisible: {
      default: false,
      type: Boolean,
    },
    submitRejectDlgVisible: {
      default: false,
      type: Boolean,
    },
    submitRejectId: {
      default: 0,
      type: Number,
    },
  },
  data() {
    return {
      keyAuthor: "",
      companyList: [],
      textReject: "",
      isShowKey: true,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 关闭添加作者的弹框
    handleCloseAuthor() {
      this.keyAuthor = "";
      this.$emit("update:addAuthorDlgVisible", false);
    },
    // 作者弹框的搜索事件
    async querySearchHandler(query, cb) {
      cb([]);
      if (!query) return;
      const res = await raiInterface.activitySignupUserList({ KeyWord: query });
      if (res.Ret === 200) {
        console.log(res);
        let arr =
          res.Data.List && res.Data.List.length
            ? res.Data.List.map((item) => {
                return {
                  ...item,
                  value: item.RealName + " - " + item.Mobile + " - " + item.CompanyName,
                };
              })
            : [];
        this.companyList = arr;
        cb(arr);
      }
    },
    // 作者添加的事件
    async addAuthorHandler() {
      const isKey = this.companyList.some((item) => item.value === this.keyAuthor);
      if (!isKey) return this.$message.error("请输入客户姓名!");
      let params = this.companyList.filter((item) => item.value === this.keyAuthor);
      const res = await raiInterface.yanxuan_specialAuthorAdd({
        UserId: params[0].UserId,
        RealName: params[0].RealName,
        Mobile: params[0].Mobile,
      });
      if (res.Ret === 200) {
        this.handleCloseAuthor();
        this.$message.success("添加成功！");
        this.$parent.getyanxuanReportSpecial();
      }
    },
    /* **************************************************** */
    // 驳回的弹框关闭事件
    handleCloseReject() {
      this.textReject = "";
      this.$emit("update:submitRejectDlgVisible", false);
    },
    // 驳回的弹框确定事件
    async submitRejectHandler() {
      if (!this.textReject) return this.$message.error("请输入驳回原因");
      // 提交成功后刷新页面
      const res = await raiInterface.yanxuan_specialEnable({
        Id: this.submitRejectId,
        Status: 2,
        Reason: this.textReject,
      });
      if (res.Ret === 200) {
        this.handleCloseReject();
        this.$message.success("操作成功！");
        this.$parent.getSpecialList();
      }
    },
    changeHandler() {
      if (!this.keyAuthor) return;
      this.isShowKey = this.companyList.some((item) => item.value === this.keyAuthor);
    },
    selectCompany() {
      this.isShowKey = this.companyList.some((item) => item.value === this.keyAuthor);
    },
  },
};
</script>
<style lang="scss">
.special-dlg-container {
  .el-dialog .el-input {
    width: 100%;
  }
}
</style>
