<template>
  <el-dialog
    :title="tableType === 1 ? '增加' : '编辑'"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    @open="onOpen"
  >
    <el-form ref="form" :model="form" :rules="rules">
      <div class="userTop">
        <i class="tips">*</i>
        <label class="tag">单位名称</label>
        <el-form-item class="formItem" prop="parentId">
          <el-select v-model="form.parentId">
            <el-option label="短信服务中心" value="66" />
            <el-option label="市场部" value="96" />
            <el-option label="博物馆" value="99" />
          </el-select>
        </el-form-item>
        <i class="tips">*</i>
        <label class="tag">账号名称</label>
        <el-form-item class="formItem" prop="apiName">
          <el-input v-model="form.apiName" />
        </el-form-item>
      </div>
      <div class="userBody">
        <i class="tips">*</i>
        <label class="tag">登入名</label>
        <el-form-item class="formItem" prop="account">
          <el-input v-model="form.account" />
        </el-form-item>
        <i class="tips">*</i>
        <label class="tag">登入密码</label>
        <el-form-item class="formItem" prop="password">
          <el-input v-model="form.password" />
        </el-form-item>
      </div>
      <div class="userBottom">
        <label class="tag tagDtName">联系人</label>
        <el-form-item class="formItem formDtName">
          <el-input v-model="form.dtName" />
        </el-form-item>
        <label class="tag">电话</label>
        <el-form-item class="formItem">
          <el-input v-model="form.dtMobile" />
        </el-form-item>
      </div>
      <el-form-item label="绑定IP">
        <el-input v-model="form.bindip" type="textarea" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>
      <div class="interfaceType">
        <i class="tips">*</i>
        <label class="tag tagFormItem">接口类型</label>
        <el-form-item class="formItem" prop="apitype">
          <el-select v-model="form.apitype">
            <el-option v-for="item in apitypeList" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <label class="tag">状态</label>
        <el-form-item class="formItem">
          <el-select v-model="form.usestate">
            <el-option v-for="item in usestateList" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </div>

      <div v-if="form.apitype === 0" class="inside">
        <el-form-item label="可选签名列表" class="insideInput">
          <el-input v-model="form.webSign" />
        </el-form-item>
        <el-form-item label="默认回复">
          <el-radio-group v-model="form.isReply">
            <el-radio v-for="item in isReplyList" :key="item.id" :label="item.label">{{ item.name }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="流水号长度" class="insideInput">
          <el-input v-model="form.numberLength" />
        </el-form-item>
      </div>
      <div v-if="form.apitype === 1">
        <div>
          <label class="tag">MO获取方式</label>
          <el-form-item class="formItem">
            <el-select v-model="form.momode" placeholder="请选择活动区域">
              <el-option v-for="item in momodeList" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <label class="tag">MO接收地址</label>
          <el-form-item class="formItem">
            <el-input v-model="form.mourl" />
          </el-form-item>
        </div>
        <div>
          <label class="tag">状态获取方式</label>
          <el-form-item class="formItem">
            <el-select v-model="form.rptmode" placeholder="请选择活动区域">
              <el-option v-for="item in rptmodeList" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <label class="tag">状态接收地址</label>
          <el-form-item class="formItem">
            <el-input v-model="form.rpturl" />
          </el-form-item>
        </div>
        <div>
          <label class="tag">接收验证用户</label>
          <el-form-item class="formItem">
            <el-input v-model="form.cmppSpCode" />
          </el-form-item>
          <label class="tag">接收验证密码</label>
          <el-form-item class="formItem">
            <el-input v-model="form.pswd" />
          </el-form-item>
        </div>
      </div>
      <div v-if="form.apitype === 2 || form.apitype === 3">
        <div>
          <label class="tag tagDtName">服务器IP</label>
          <el-form-item class="formItem">
            <el-input v-model="form.apiIp" />
          </el-form-item>
          <label class="tag">服务器端口</label>
          <el-form-item class="formItem">
            <el-input v-model="form.apiPort" />
          </el-form-item>
        </div>
        <div>
          <label class="tag tagDtName">接入号码</label>
          <el-form-item class="formItem" prop="cmppSpCode">
            <el-input v-model="form.receiver" />
          </el-form-item>
          <label class="tag">并发送</label>
          <el-form-item class="formItem">
            <el-input v-model="form.subspeed" />
          </el-form-item>
        </div>
      </div>
      <div v-if="form.apitype === 4">
        <div>
          <label class="tag">MO获取方式</label>
          <el-form-item class="formItem">
            <el-select v-model="form.momode" placeholder="请选择活动区域">
              <el-option v-for="item in momodeList" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <label class="tag">MO接收地址</label>
          <el-form-item class="formItem">
            <el-input v-model="form.mourl" />
          </el-form-item>
        </div>
        <div>
          <label class="tag">状态获取方式</label>
          <el-form-item class="formItem">
            <el-select v-model="form.rptmode" placeholder="请选择活动区域">
              <el-option v-for="item in rptmodeList" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <label class="tag">状态接收地址</label>
          <el-form-item class="formItem">
            <el-input v-model="form.rpturl" />
          </el-form-item>
        </div>
      </div>
      <div v-if="form.apitype === 5">
        <i class="tips">*</i>
        <label class="tag">接入密钥</label>
        <el-form-item class="formItem" prop="apiKey">
          <el-input v-model="form.apiKey" />
        </el-form-item>
      </div>
      <div v-if="form.apitype === 6 || form.apitype === 7">
        <i class="tips">*</i>
        <label class="tag">接口标识</label>
        <el-form-item class="formItem">
          <el-input />
        </el-form-item>
      </div>
      <div v-if="form.apitype === 8">
        <div>
          <label class="tag">MO获取方式</label>
          <el-form-item class="formItem">
            <el-select v-model="form.momode" placeholder="请选择活动区域">
              <el-option v-for="item in momodeList" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <label class="tag">MO接收地址</label>
          <el-form-item class="formItem">
            <el-input v-model="form.mourl" />
          </el-form-item>
        </div>
        <div>
          <label class="tag">状态获取方式</label>
          <el-form-item class="formItem">
            <el-select v-model="form.rptmode" placeholder="请选择活动区域">
              <el-option v-for="item in rptmodeList" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <label class="tag">状态接收地址</label>
          <el-form-item class="formItem">
            <el-input v-model="form.rpturl" />
          </el-form-item>
        </div>
        <div>
          <label class="tag">接入号码</label>
          <el-form-item class="formItem">
            <el-input v-model="form.receiver" />
          </el-form-item>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onsubmit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { custCustApiExistsAPI, custCustApiSaveAPI, custCustApiUpdateAPI } from '@/api/Account/NoteAccount'

export default {
  // eslint-disable-next-line
  props: ['dialog-visible', 'table-item', 'table-type', 'loading'],

  data() {
    return {
      form: {
        parentId: '',
        apiName: '',
        apitype: '',
        account: '',
        password: '',
        apiIp: '',
        apiPort: '',
        cmppSpCode: '',
        mourl: '',
        rpturl: '',
        receiver: '',
        pswd: '',
        apiKey: '',
        bindip: '',
        subspeed: '',
        usestate: '',
        remark: '',
        dtName: '',
        dtMobile: '',
        webSign: '',
        isReply: '',
        numberLength: ''
      },
      rules: {
        parentId: [
          { required: true, message: '请选择单位名称', trigger: 'change' }
        ],
        apiName: [
          { required: true, message: '请输入账号名称', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输入登入名', trigger: 'blur' },
          { min: 2, message: '用户名至少2位', trigger: 'blur' },
          { validator: async(rule, value, callback) => {
            const flag = await custCustApiExistsAPI({ account: value })
            if (flag || this.tableType === 2) {
              callback()
            } else {
              callback(new Error('用户名重复'))
            }
          }, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登入密码', trigger: 'blur' }
        ],
        apitype: [
          { required: true, message: '请选择接口类型', trigger: 'change' }
        ],
        cmppSpCode: [
          { min: 4, max: 5, message: '请输入4到5位数字', trigger: 'blur' }
        ],
        apiKey: [
          { required: true, message: '请输入密钥', trigger: 'blur' }
        ]
      },

      apitypeList: [
        {
          id: 2,
          label: '内部WEB',
          value: 0
        },
        {
          id: 3,
          label: '塞亚API',
          value: 1
        },
        {
          id: 4,
          label: 'CMPP20',
          value: 2
        },
        {
          id: 5,
          label: 'CMPP30',
          value: 3
        },
        {
          id: 6,
          label: '步云API',
          value: 4
        },
        {
          id: 7,
          label: 'CMAS_API',
          value: 5
        },
        {
          id: 8,
          label: 'MAS_DB',
          value: 6
        },
        {
          id: 9,
          label: 'MAS_WES',
          value: 7
        },
        {
          id: 10,
          label: '迈远API',
          value: 8
        }
      ],
      usestateList: [
        {
          id: 1,
          label: '启用',
          value: 1
        },
        {
          id: 2,
          label: '停用',
          value: 0
        },
        {
          id: 3,
          label: '异常',
          value: 2
        }
      ],
      isReplyList: [
        {
          id: 1,
          label: 0,
          name: '否'
        },
        {
          id: 2,
          label: 1,
          name: '是'
        }
      ],
      momodeList: [
        {
          id: 1,
          label: '自动获取',
          value: 1
        },
        {
          id: 2,
          label: '推送',
          value: 2
        }
      ],
      rptmodeList: [
        {
          id: 1,
          label: '自动获取',
          value: 1
        },
        {
          id: 2,
          label: '推送',
          value: 2
        }
      ]
    }
  },

  created() {
    this.defaultData()
  },

  methods: {
    defaultData() {
      this.form = {
        apiIp: '112.74.12.129',
        apiPort: '7890',
        subspeed: '50'
      }
      this.form.usestate = this.usestateList[0].value
      this.form.isReply = this.isReplyList[0].label
      this.form.momode = this.momodeList[0].value
      this.form.rptmode = this.rptmodeList[0].value
    },
    handleClose() {
      this.$emit('dialogVisibleChange', '')
      this.defaultData()
    },
    onsubmit() {
      this.$refs.form.validate(async flag => {
        if (flag) {
          if (this.tableType === 1) await custCustApiSaveAPI(this.form)
          if (this.tableType === 2) await custCustApiUpdateAPI(this.form)
          this.$emit('getCustCustApiList', '')
          this.$emit('onLoading', '')
          this.handleClose()
          this.defaultData()
          this.$emit('onLoading', '')
        }
      })
    },
    onOpen() {
      if (this.tableType === 2) this.form = this.tableItem[0]
    }
  }
}
</script>

<style lang="scss" scoped>
.userBottom {
  .tagDtName {
    margin-left: 8px;
  }
}

.tips {
  color: #f56c6c;
  margin-right: 4px;
}
.tag {
  display: inline-block;
  margin-right: 15px;
  width: 100px;
  text-align: center;
}

::v-deep .formItem {
  display: inline-block;
  margin-right: 30px;
}
::v-deep .el-input {
  width: 200px;
}
::v-deep .formDtName {
  margin-right: 40px;
}
::v-deep .inside .insideInput .el-input {
  width: 100%;
}
</style>
