<template>
    <div class="add-company-page">
        <Card>
          <div class="head">
            <Icon type="md-bookmark" color="#2d8cf0" :size="28" />
            <label>新增快递公司</label>
          </div>
          <!-- <div class="item">
            <label class="label">查询名称：</label>
            <Input
              placeholder="请输入快递名称"
              clearable
              class="item-input"
              search
              enter-button
              @on-search="handleSearch"
            />
          </div> -->
          <!-- <div class="item">
            <label class="label">快递名称：</label>
            <Select
              placeholder="先查询名称哦！"
              class="item-input"
              v-model="form.companyName"
            >
              <Option
                v-for="(item, index) of expNameList"
                :value="item.simpleName"
                :key="'state-option-' + index"
              >{{ item.expName }}</Option>
            </Select>
          </div> -->
        <div class="item">
          <label class="label">快递名称：</label>
          <Select
              placeholder="请输入以查询快递名称"
              class="item-input"
              v-model="form.companyName"
              transfer
              filterable
              remote
              clearable
              :remote-method="handleSearch"
              :label="expName"
              style="width:400px"
            >
              <Option
                v-for="(item, index) of expNameList"
                :value="item.simpleName"
                :key="'state-option-' + index"
              >{{ item.expName }}</Option>
            </Select>
         </div>
          <div class="item">
            <label class="label">合作网点：</label>
            <Input
              placeholder="请输入合作网点"
              v-model="form.cooperationNetwork"
              clearable
              class="item-input"
              style="width:400px"
            />
          </div>
          <div class="item">
            <label class="label">网点地址：</label>
            <Input
              placeholder="请输入网点地址"
              v-model="form.networkAddress"
              clearable
              class="item-input"
              style="width:400px"
            />
          </div>
          <div class="item">
            <label class="label">网点电话：</label>
            <Input
              placeholder="请输入网点电话"
              v-model="form.networkPhone"
              clearable
              class="item-input"
              type="tel"
              style="width:400px"
            />
          </div>
          <div class="footer-con">
            <Button
              type="default"
              @click="handleCancel"
              style="margin-right: 30px"
            >取消</Button
            >
            <Button
              type="primary"
              @click="handleSubmit"
              :loading="submitLoading"
            >确定</Button
            >
          </div>
        </Card>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'add-company',
  data () {
    return {
      form: {
        companyName: '',
        cooperationNetwork: '',
        networkAddress: '',
        networkPhone: ''
      },
      submitLoading: false,
      expNameList: [],
      expName: ''
    }
  },
  methods: {
    handleSearch (expName) {
      if (!expName) {
        return this.$Message.warning('请先输入快递昵称以便查询！')
      }
      this.api({
        apiName: 'getCompanyName',
        postdata: { expName },
        success: (res) => {
          this.expNameList = res.data
          // this.$Message.success('查询成功')
        }
      })
    },
    checkForm () {
      let errMsg = ''
      let { companyName, cooperationNetwork, networkAddress, networkPhone } = this.form

      if (!networkPhone && !(/^1[3456789]d{9}$/.test(networkPhone))) {
        errMsg = '请输入正确的联系电话'
      }
      if (!networkAddress) {
        errMsg = '请输入网点地址'
      }
      if (!cooperationNetwork) {
        errMsg = '请输入合作网点'
      }
      // if (!companyCode) {
      //   errMsg = '请输入快递代码'
      // }
      if (!companyName) {
        errMsg = '请输入快递名称'
      }
      return { errMsg }
    },
    ...mapMutations(['closeTag']),
    handleCancel () {
      let route = this.$route
      let toRouteName = 'express_company'
      this.closeTag({ route, toRouteName })
    },
    handleSubmit () {
      console.log(this.form.companyName)
      let { errMsg } = this.checkForm()
      if (errMsg) {
        this.$Message.warning(errMsg)
        return
      }
      this.submitLoading = true
      this.api({
        apiName: 'addCompany',
        postdata: this.form,
        complete: () => {
          this.submitLoading = false
        },
        success: (res) => {
          let route = this.$route
          let toRouteName = 'express_company'
          this.closeTag({ route, toRouteName })
          this.$Notice.success({ title: '新增成功！' })
        }
      })
    }
  }

}
</script>

<style scoped lang="less">
  .head {
    color: #17233d;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    i {
      margin-right: 10px;
    }
  }
  .item {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .item-input {
      width: 300px;
    }
    .label{
      width: 100px;
      text-align: right;
      flex-shrink: 0;
    }
  }
  .footer-con {

    margin-left: 150px;
  }
</style>
