<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('设置物流查询渠道') }}</span>
          </div>
          <div>
            <el-form
              ref="channelForm"
              label-width="100px"
              :model="channelForm"
              :rules="channelRules"
              size="medium"
            >
              <el-form-item
                :label="__('物流查询渠道')"
                label-width="150px"
                prop="logistics_channel"
              >
                <el-radio-group
                  v-model="channelForm.logistics_channel"
                  size="medium"
                >
                  <el-radio
                    v-for="(item, index) in logistics_channelOptions"
                    :key="index"
                    :disabled="item.disabled"
                    :label="__(item.value)"
                  >
                    {{ __(item.label) }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
          <div></div>
          <el-button class="form-sub-btn" icon="el-icon-s-tools" type="primary" @click="channelEdit">
            {{ __('修改') }}
          </el-button>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ __('快递鸟') }}</span>
            </div>
            <div>
              <el-form
                ref="kuaidiniaoForm"
                label-width="100px"
                :model="kuaidiniaoForm"
                :rules="kuaidiniaoRules"
                size="medium"
              >
                <el-form-item
                  label="App Id"
                  label-width="150px"
                  prop="kuaidiniao_e_business_id"
                >
                  <el-input
                    v-model="kuaidiniaoForm.kuaidiniao_e_business_id"
                    clearable
                    :placeholder="__('请输入快递鸟 AppId')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  label="App Key"
                  label-width="150px"
                  prop="kuaidiniao_app_key"
                >
                  <el-input
                    v-model="kuaidiniaoForm.kuaidiniao_app_key"
                    clearable
                    :placeholder="__('请输入快递鸟 AppKey')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button
                class="form-sub-btn"
                icon="el-icon-s-tools"
                type="primary"
                @click="kuaidiniaoEdit"
              >
                {{ __('修改') }}
              </el-button>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { getList, doEdit } from '@/api/base/config'

  export default {
    name: 'Logistics',
    components: {},
    data() {
      return {
        channelForm: {
          logistics_channel: undefined,
        },
        kuaidiForm: {
          kuaidi100_app_id: undefined,
          kuaidi100_app_key: undefined,
        },
        kuaidiniaoForm: {
          kuaidiniao_e_business_id: undefined,
          kuaidiniao_app_key: undefined,
        },
        channelRules: {
          logistics_channel: [
            {
              required: true,
              message: this.__('物流查询渠道不能为空'),
              trigger: 'change',
            },
          ],
        },
        kuaidiniaoRules: {
          kuaidiniao_e_business_id: [
            {
              required: true,
              message: this.__('请输入快递鸟 AppId'),
              trigger: 'blur',
            },
          ],
          kuaidiniao_app_key: [
            {
              required: true,
              message: this.__('请输入快递鸟 AppKey'),
              trigger: 'blur',
            },
          ],
        },
        logistics_channelOptions: [
          {
            label: this.__('快递鸟'),
            value: '2',
          },
        ],
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      __,
      async fetchData() {
        const { data } = await getList()
        this.channelInit(data)
        this.kuaidiInit(data)
        this.kuaidiniaoInit(data)
      },
      channelInit(data) {
        this.channelForm.logistics_channel = data.logistics_channel
      },
      kuaidiInit(data) {
        this.kuaidiForm = {
          kuaidi100_app_id: data.kuaidi100_app_id,
          kuaidi100_app_key: data.kuaidi100_app_key,
        }
      },
      kuaidiniaoInit(data) {
        this.kuaidiniaoForm = {
          kuaidiniao_e_business_id: data.kuaidiniao_e_business_id,
          kuaidiniao_app_key: data.kuaidiniao_app_key,
        }
      },
      channelEdit() {
        this.$refs['channelForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.channelForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
      kuaidiEdit() {
        this.$refs['kuaidiForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.kuaidiForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
      kuaidiniaoEdit() {
        this.$refs['kuaidiniaoForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.kuaidiniaoForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
    },
  }
</script>
