<template>
  <el-dialog :close-on-click-modal="false" class="scrollbar-dialog" :title="(addressid ? '修改' : '添加') + '代理服务'" :visible.sync="dialogVisible" width="600px" top="15vh" @close="closeDialog">
    <el-scrollbar class="layer-content">
      <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="120px" v-loading="dialogLoading">
        <div class="formGroup">
          <h4>一般信息</h4>
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="名称：">
                <el-input v-model="dialogForm.companyname1"></el-input>
              </el-form-item>
              <el-form-item label="说明：">
                <el-input type="textarea" v-model="dialogForm.companyname2"></el-input>
              </el-form-item>
              <el-form-item label="Connector：">
                <el-input v-model="dialogForm.connectorType" suffix-icon="el-icon-search" @focus="chooseConnector"></el-input>
              </el-form-item>
              <el-form-item label="协议：">
                <el-input v-model="dialogForm.xieyi" disabled></el-input>
              </el-form-item>
              <el-form-item label="服务类型：">
                <el-input v-model="dialogForm.fuwuleixing" disabled></el-input>
              </el-form-item>
              <el-form-item label="数据库/WSDL/FTP/FILE：">
                <el-input v-model="dialogForm.companyname3"></el-input>
              </el-form-item>
              <el-form-item label="绑定：">
                <el-input v-model="dialogForm.companyname3"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="formGroup">
          <h4>目标</h4>
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="名称：">
                <el-input v-model="dialogForm.targetName" suffix-icon="el-icon-search" @focus="chooseTarget"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="formGroup">
          <h4>通讯</h4>
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="路径：">
                <el-input v-model="dialogForm.companyname2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="formGroup">
          <h4>传输</h4>
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="必须是HTTPS：">
                <el-checkbox-group v-model="dialogForm.ishttp">
                  <el-checkbox label=""></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="验证：">
                <el-radio-group v-model="dialogForm.yanzheng">
                  <el-radio v-for="item in yanzhengOption" :label="item.name" :value="item.value" :key="item.value"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="formGroup">
          <h4>报文配置</h4>
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="请求编码：">
                <el-input v-model="dialogForm.companyname1"></el-input>
              </el-form-item>
              <el-form-item label="响应编码：">
                <el-input v-model="dialogForm.companyname2"></el-input>
              </el-form-item>
              <el-form-item label="支持压缩：">
                <el-checkbox-group v-model="dialogForm.ishttp">
                  <el-checkbox label=""></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </el-scrollbar>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
    <choose-connector-dialog v-model="connectorVisible" @confirm="handleConnector" />
    <choose-target-dialog v-model="targetVisible" @confirm="handleTarget" />
  </el-dialog>
</template>

<script>
import { queryAddresInfo, saveAddres } from '@/api/system'
import ChooseConnectorDialog from '@/components/connector/ChooseConnectorDialog'
import ChooseTargetDialog from '@/components/target/ChooseTargetDialog'
export default {
  name: 'AgencyAdd',
  components: {
    ChooseConnectorDialog,
    ChooseTargetDialog
  },
  data() {
    return {
      dialogVisible: this.value,
      dialogLoading: false,
      dialogForm: {
        ishttp: []
      },
      yanzhengOption: [
        {
          name: '无',
          value: '无'
        },
        {
          name: '基本',
          value: '基本'
        },
        {
          name: '客户端证书',
          value: '客户端证书'
        },
        {
          name: '定制验证',
          value: '定制验证'
        }
      ],
      connectorVisible: false,
      targetVisible: false,
      rules: {
        companyname: [
          { required: true, message: '登录账号不能为空', trigger: 'blur' }
        ],
        companycode: [
          { required: true, message: '显示姓名不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    addressid: {
      type: String,
      default: null
    },
    addresscode: {
      type: String,
      default: null
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    closeDialog() {
      this.$refs.dialogForm.resetFields()
    },
    requestData(id) {
      this.dialogLoading = true
      queryAddresInfo(id).then((rt) => {
        this.dialogLoading = false
        for (const key in this.dialogForm) {
          this.dialogForm[key] = rt.data[key]
        }
        this.addressList = rt.data.address || []
      }).catch(() => {
        this.dialogLoading = false
        this.addressList = []
      })
    },
    chooseConnector() {
      this.connectorVisible = true
    },
    handleConnector(data) {
      this.dialogForm.connectorType = data.type
      this.dialogForm.xieyi = data.explain
      this.dialogForm.fuwuleixing = data.type
    },
    chooseTarget() {
      this.targetVisible = true
    },
    handleTarget(data) {
      this.dialogForm.targetName = data.name
    },
    async submit() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          if (this.addressList.length === 0) {
            this.$message({
              message: '收货地址必须要有行信息',
              type: 'error'
            })
            return
          } else {
            for (let i = 0; i < this.addressList.length; i++) {
              if (this.addressList[i].addres === '' || this.addressList[i].addres === undefined || this.addressList[i].addres === null) {
                this.$message({
                  showClose: true,
                  message: '详细地址不能为空',
                  type: 'error'
                })
                return
              }
            }
            if (this.addressList.filter(item => item.type === '0').length === 0) {
              this.$message({
                showClose: true,
                message: '请选择一个默认收货地址',
                type: 'error'
              })
              return
            }
          }
          const ids = this.addressid ? { id: this.addressid } : {}
          const params = {
            ...ids,
            userid: this.$store.state.app.userInfo.empuid,
            ...this.dialogForm,
            address: this.addressList
          }
          this.dialogLoading = true
          saveAddres(params).then(() => {
            this.$emit('confirm')
            this.dialogVisible = false
            this.$message({
              message: `${this.addressid ? '修改' : '添加'}成功`,
              type: 'success'
            })
          }).catch(() => {
            this.dialogLoading = false
          })
        }
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
</style>
