// 添加/修改授权
<template>
  <el-dialog
    :title="isEdit ? '编辑服务权限' : '添加服务权限'"
    width="900px"
    :visible.sync="visible"
    :destroy-on-close="false"
    :close-on-click-modal="false"
    :center="true"
  >
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-position="left"
      label-width="140px"
    >
      <el-form-item prop="id" style="margin-bottom: 0">&nbsp;</el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="购买方公司" prop="purchaserId" required>
            <el-select
              v-model="form.purchaserId"
              placeholder="请选择购买方公司"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) in buyList"
                :key="index"
                :label="item.companyName"
                :value="item.purchaserId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="条件接口类型" prop="interfaceType" required>
            <el-select
              v-model="form.interfaceType"
              placeholder="请选择条件接口类型"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) in interfaceTypeList"
                :key="index"
                :label="item.desc"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否返回详细信息" prop="resultInfoSwitch">
            <el-radio-group v-model="form.resultInfoSwitch">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总调用次数" prop="limitTimes">
            <el-input-number
              v-model="form.limitTimes"
              :min="0"
              :step="1"
              size="mini"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="调用频率" prop="limitFrequencyTime">
            <el-input-number
              v-model="form.limitFrequencyTime"
              :min="0"
              :max="1000"
              :step="1"
              size="mini"
            />
            秒可调用
            <el-input-number
              v-model="form.limitFrequency"
              :min="0"
              :max="1000"
              :step="1"
              size="mini"
            />
            次
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="form.interfaceType == 2">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="返回地址" prop="dzSwitch">
              <el-radio-group v-model="form.dzSwitch">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="返回照片" prop="xpSwitch">
              <el-radio-group v-model="form.xpSwitch">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="调用省接口" prop="searchSwitchProvince">
              <el-radio-group v-model="form.searchSwitchProvince">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取消 </el-button>
      <el-button type="primary" :loading="submitLoading" @click="submit">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { add } from "@/api/auth";
import { purchaserList } from "@/api/configuration";
import { typeList, authAdd } from "@/api/tripartiteApi";
export default {
  data() {
    return {
      form: {
        limitTimes: 10000,
        purchaserId: null,
        interfaceType: null,
        limitFrequencyTime: 10,
        limitFrequency: 1,
        resultInfoSwitch: true,
        dzSwitch: false,
        xpSwitch: false,
        searchSwitchProvince: false,
      },
      rules: {
        purchaserId: [
          {
            required: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        interfaceType: [
          {
            required: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        limitTimes: [
          {
            required: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        limitFrequencyTime: [
          {
            required: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        resultInfoSwitch: [
          {
            required: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        xpSwitch: [
          {
            required: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        dzSwitch: [
          {
            required: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        searchSwitchProvince: [
          {
            required: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
      },
      visible: false,
      submitLoading: false,
      isEdit: false,
      buyList: [],
      interfaceTypeList: [],
    };
  },
  created() {
    this.purchaserList();
    this.typeList();
  },
  methods: {
    open(obj) {
      this.visible = true;
      this.submitLoading = false;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        if (obj && Object.keys(obj).length > 0) {
          this.form = obj;
          this.form.extendParams = JSON.parse(this.form.extendParams);
            this.$set(this.form, "dzSwitch",  this.form.extendParams.dzSwitch);
            this.$set(this.form, "xpSwitch",  this.form.extendParams.xpSwitch);
            this.$set(this.form, "searchSwitchProvince",  this.form.extendParams.searchSwitchProvince);
          this.isEdit = true;
        } else {
          this.isEdit = false;
        }
      });
    },
    submit(e) {
      e.preventDefault();
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          return false;
        }
        if (this.submitLoading) {
          return;
        }
        this.form.extendParams = {};
        this.form.extendParams.dzSwitch = this.form.dzSwitch;
        this.form.extendParams.xpSwitch = this.form.xpSwitch;
        this.form.extendParams.searchSwitchProvince =
          this.form.searchSwitchProvince;
        this.form.extendParams = JSON.stringify(this.form.extendParams);
        this.submitLoading = true;
        try {
          await authAdd(this.form);
          this.visible = false;
          this.$emit("success", this.isEdit);
        } catch (e) {
          console.info("add", e);
        } finally {
          this.submitLoading = false;
        }
      });
    },
    // 购买方列表
    purchaserList() {
      purchaserList().then((res) => {
        this.buyList = res.data;
      });
    },
    // 条件接口类型
    typeList() {
      typeList().then((res) => {
        this.interfaceTypeList = res.data;
      });
    },
  },
};
</script>

<style scoped>
::v-deep .el-select {
  width: 100%;
}
</style>
