<template>
  <div class="container-editMobile">
    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center :append-to-body="true" width="40%" :visible.sync="editMobileDialogVisible" :before-close="handleClose">
      <div slot="title" style="display: flex; align-items: center">
        <img :src="$icons.edit_garden" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
        <span style="font-size: 16px">修改外呼号码</span>
      </div>
      <div class="content-box" style="margin-top: 20px; margin-bottom: 60px">
        <el-select style="width: 80px" v-model="selectValue" placeholder="请选择">
          <el-option v-for="item in optionsMobile" :key="item.key" :label="item.value" :value="item.key"> </el-option>
        </el-select>
        <el-input style="width: 368px" v-model="modelKey" placeholder="请输入手机号或座机号" />
        <p style="margin-top: 15px">座机号请填写区号，分机号用"-"分隔，例：02150509999-8888</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface,raiSpecial } from "@/api/api.js";
export default {
  name: "",
  components: {},
  props: {
    editMobileDialogVisible: {
      type: Boolean,
      default: false,
      required: true,
    },
    editMobileId: {
      type: Number,
      required: true,
    },
    outboundMobile: {
      type: String,
      required: true,
    },
    isType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      selectValue: "86",
      optionsMobile: [
        { value: "+86", key: "86" },
        { value: "+852", key: "852" },
        { value: "+886", key: "886" },
        { value: "+1", key: "1" },
        { value: "+65", key: "65" },
      ],
      modelKey: "",
    };
  },
  computed: {},
  watch: {
    editMobileDialogVisible(newval) {
      if (newval) {
        this.activitySignupSignupDetail();
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    async activitySignupSignupDetail() {
      const res = this.isType ? await "" : await raiInterface.activitySignupSignupDetail({ Id: this.editMobileId });
      if (res.Ret === 200) {
        this.selectValue = res.Data.CountryCode ? res.Data.CountryCode : "86";
        this.modelKey = res.Data.OutboundMobile;
      }
    },
    handleClose() {
      this.selectValue = "86";
      this.modelKey = "";
      this.$parent.outboundMobile = "";
      this.$emit("update:editMobileDialogVisible", false);
    },
    async btnOk() {
      const res = this.isType
        ? await raiSpecial.outboundMobileEdit({
            CountryCode: this.selectValue,
            OutboundMobile: this.modelKey,
            Id: this.editMobileId,
          })
        : await raiInterface.outboundMobileEdit({
            CountryCode: this.selectValue,
            OutboundMobile: this.modelKey,
            Id: this.editMobileId,
          });

      if (res.Ret !== 200) return;
      this.$message.success("操作成功");
      this.selectValue = "86";
      this.modelKey = "";
      this.$emit("update:editMobileDialogVisible", false);
      this.$parent.outboundMobile = "";
      this.$parent.getsDataList();
    },
  },
};
</script>
<style scoped lang="scss">
.container-editMobile {
  .content-box {
    margin-top: 20px;
    margin-bottom: 60px;
    display: flex;
  }
}
</style>
