<template>
  <el-row>
    <el-col>
      <el-card id="box-card-form-1">
        <el-form ref="form" :model="form">
          <el-form-item
            :label="__('网站名称')"
            label-width="150px"
            prop="site_name"
          >
            <el-input
              v-model="form.site_name"
              clearable
              :placeholder="__('请输入网站名称')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item
            :label="__('Meta Tag 描述')"
            label-width="150px"
            prop="site_meta_description"
          >
            <el-input
              v-model="form.site_meta_description"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :placeholder="__('请输入Meta Tag 描述')"
              :style="{ width: '100%' }"
              type="textarea"
            />
          </el-form-item>
          <el-form-item
            :label="__('Meta Tag 关键字')"
            label-width="150px"
            prop="site_meta_keyword"
          >
            <el-input
              v-model="form.site_meta_keyword"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :placeholder="__('请输入Meta Tag 关键字')"
              :style="{ width: '100%' }"
              type="textarea"
            />
          </el-form-item>
          <el-form-item
            :label="__('slogan 平台口号')"
            label-width="150px"
            prop="site_promotion"
          >
            <el-input
              v-model="form.site_promotion"
              clearable
              :placeholder="__('请输入slogan 平台口号')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item
            :label="__('PC端平台LOGO')"
            label-width="150px"
            prop="site_logo"
            required
          >
            <upload
              height="64px"
              :image="form.site_logo"
              width="255px"
              @upImage="
                (image) => {
                  form.site_logo = image
                }
              "
            />
            <div>{{ __('尺寸 255 * 64') }}</div>
          </el-form-item>
          <el-form-item
            :label="__('移动端LOGO')"
            label-width="150px"
            prop="wap_site_logo"
            required
          >
            <upload
              height="50px"
              :image="form.wap_site_logo"
              width="100px"
              @upImage="
                (image) => {
                  form.wap_site_logo = image
                }
              "
            />
            <div>100 * 50, 移动端使用</div>
          </el-form-item>
          <el-form-item
            :label="__('文字LOGO')"
            label-width="150px"
            prop="text_site_logo"
            required
          >
            <upload
              height="36px"
              :image="form.text_site_logo"
              width="160px"
              @upImage="
                (image) => {
                  form.text_site_logo = image
                }
              "
            />
            <div>160 * 36, 背景透明的PNG图片</div>
          </el-form-item>
          <el-form-item
            :label="__('文字LOGO-mini')"
            label-width="150px"
            prop="textmini_site_logo"
            required
          >
            <upload
              height="100px"
              :image="form.textmini_site_logo"
              width="100px"
              @upImage="
                (image) => {
                  form.textmini_site_logo = image
                }
              "
            />
            <div>80 * 80</div>
          </el-form-item>
          <el-form-item
            label="Favorites Icon"
            label-width="150px"
            prop="site_icon"
            required
          >
            <upload
              height="100px"
              :image="form.site_icon"
              width="100px"
              @upImage="
                (image) => {
                  form.site_icon = image
                }
              "
            />
            <div>64 * 64, ICO图片</div>
          </el-form-item>
          <el-form-item
            :label="__('默认头像')"
            label-width="150px"
            prop="user_no_avatar"
            required
          >
            <upload
              height="100px"
              :image="form.user_no_avatar"
              width="100px"
              @upImage="
                (image) => {
                  form.user_no_avatar = image
                }
              "
            />
            <div>256 * 256, 图片</div>
          </el-form-item>
          <el-form-item
            :label="__('PC用户登录背景图片')"
            label-width="160px"
            prop="account_login_bg"
            required
          >
            <upload
              height="44px"
              :image="form.account_login_bg"
              width="194px"
              @upImage="
                (image) => {
                  form.account_login_bg = image
                }
              "
            />
            <div>1920 * 426, 图片</div>
          </el-form-item>
          <el-form-item
            :label="__('公司名称')"
            label-width="150px"
            prop="site_company_name"
          >
            <el-input
              v-model="form.site_company_name"
              clearable
              :placeholder="__('请输入公司名称')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item
            :label="__('平台联系地址')"
            label-width="150px"
            prop="site_address"
          >
            <el-input
              v-model="form.site_address"
              clearable
              :placeholder="__('请输入平台联系地址')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item
            :label="__('平台客服联系电话')"
            label-width="150px"
            prop="site_tel"
          >
            <el-input
              v-model="form.site_tel"
              clearable
              :placeholder="__('请输入平台客服联系电话')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item
            :label="__('电子邮件')"
            label-width="150px"
            prop="site_email"
          >
            <el-input
              v-model="form.site_email"
              clearable
              :placeholder="__('请输入电子邮件')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item
            :label="__('平台QQ')"
            label-width="150px"
            prop="site_qq"
          >
            <el-input
              v-model="form.site_qq"
              clearable
              :placeholder="__('请输入平台QQ')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item
            v-if="false"
            :label="__('平台旺旺')"
            label-width="150px"
            prop="site_ww"
          >
            <el-input
              v-model="form.site_ww"
              clearable
              :placeholder="__('请输入平台旺旺')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item
            v-if="false"
            :label="__('网站默认模版')"
            label-width="150px"
            prop="theme_id_wrap"
          >
            <el-select
              v-model="form.theme_id_wrap"
              clearable
              :placeholder="__('网站默认模版')"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in theme_id_wrapOptions"
                :key="index"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="false"
            :label="__('系统默认语言')"
            label-width="150px"
            prop="language_id_wrap"
          >
            <el-select
              v-model="form.language_id_wrap"
              clearable
              :placeholder="__('请选择系统默认语言')"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in language_id_wrapOptions"
                :key="index"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="false"
            :label="__('使用时区')"
            label-width="150px"
            prop="date_default_timezone_set_wrap"
          >
            <el-select
              v-model="form.date_default_timezone_set_wrap"
              clearable
              :placeholder="__('请选择使用时区')"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in date_default_timezone_set_wrapOptions"
                :key="index"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="false"
            :label="__('货币单位符号')"
            label-width="150px"
            prop="monetary_unit"
          >
            <el-input
              v-model="form.monetary_unit"
              clearable
              :placeholder="__('请输入货币单位符号')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item
            v-if="false"
            :label="__('日期格式')"
            label-width="150px"
            prop="date_format_wrap"
          >
            <el-select
              v-model="form.date_format_wrap"
              clearable
              :placeholder="__('请选择日期格式')"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in date_format_wrapOptions"
                :key="index"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="false"
            :label="__('时间格式')"
            label-width="150px"
            prop="time_format_wrap"
          >
            <el-select
              v-model="form.time_format_wrap"
              clearable
              :placeholder="__('请选择时间格式')"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in time_format_wrapOptions"
                :key="index"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="__('ICP证书号')"
            label-width="150px"
            prop="icp_number"
          >
            <el-input
              v-model="form.icp_number"
              clearable
              :placeholder="__('请输入ICP证书号')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item
            :label="__('第三方流量统计代码')"
            label-width="150px"
            prop="statistics_code"
          >
            <el-input
              v-model="form.statistics_code"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :placeholder="__('请输入第三方流量统计代码')"
              :style="{ width: '100%' }"
              type="textarea"
            />
          </el-form-item>
          <el-form-item
            :label="__('版权信息')"
            label-width="150px"
            prop="copyright"
          >
            <el-input
              v-model="form.copyright"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :placeholder="__('请输入版权信息')"
              :style="{ width: '100%' }"
              type="textarea"
            />
          </el-form-item>
          <el-form-item
            :label="__('站点状态')"
            label-width="150px"
            prop="site_status"
          >
            <el-radio-group v-model="form.site_status" size="medium">
              <el-radio
                v-for="(item, index) in site_statusOptions"
                :key="index"
                :disabled="item.disabled"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="__('关闭原因')"
            label-width="150px"
            prop="closed_reason"
          >
            <el-input
              v-model="form.closed_reason"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :placeholder="__('请输入关闭原因')"
              :style="{ width: '100%' }"
              type="textarea"
            />
          </el-form-item>
          <el-form-item
            :label="__('系统版本')"
            label-width="150px"
            prop="site_version"
          >
            <el-input
              v-model="form.site_version"
              clearable
              :placeholder="__('请输入系统版本')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
        </el-form>
        <el-button
          class="form-sub-btn"
          icon="el-icon-s-tools"
          type="primary"
          @click="handleEdit"
        >
          {{ __('修改') }}
        </el-button>
      </el-card>
    </el-col>
  </el-row>
</template>

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

export default {
  name: 'Site',
  components: { Upload },
  data() {
    return {
      action: URL.action,
      pic_address: null,
      form: {
        site_name: undefined,
        site_meta_description: undefined,
        site_meta_keyword: undefined,
        site_promotion: undefined,
        site_logo: null,
        wap_site_logo: null,
        text_site_logo: null,
        textmini_site_logo: '',
        site_icon: null,
        user_no_avatar: null,
        account_login_bg: null,
        site_company_name: undefined,
        site_address: undefined,
        site_tel: undefined,
        site_email: undefined,
        site_qq: undefined,
        site_ww: undefined,
        theme_id_wrap: undefined,
        language_id_wrap: undefined,
        date_default_timezone_set_wrap: undefined,
        monetary_unit: undefined,
        date_format_wrap: undefined,
        time_format_wrap: undefined,
        icp_number: undefined,
        statistics_code: undefined,
        copyright: undefined,
        site_status: undefined,
        closed_reason: undefined,
        site_version: undefined,
      },
      theme_id_wrapOptions: [
        {
          label: 'default',
          value: 1,
        },
        {
          label: 'home-design',
          value: 2,
        },
      ],
      language_id_wrapOptions: [
        {
          label: this.__('简中'),
          value: 1,
        },
        {
          label: 'U.S.A',
          value: 2,
        },
        {
          label: ' عربي ، ',
          value: 3,
        },
        {
          label: this.__('日本語'),
          value: 4,
        },
      ],
      date_default_timezone_set_wrapOptions: [
        {
          label: this.__('选项一'),
          value: 1,
        },
        {
          label: this.__('选项二'),
          value: 2,
        },
      ],
      date_format_wrapOptions: [
        {
          label: 'Y-m-d',
          value: 1,
        },
        {
          label: 'Y年m月d日',
          value: 2,
        },
        {
          label: 'date_format-1',
          value: 3,
        },
        {
          label: 'date_format-2',
          value: 4,
        },
        {
          label: 'date_format-3',
          value: 5,
        },
      ],
      time_format_wrapOptions: [
        {
          label: 'H:i:s',
          value: 1,
        },
        {
          label: 'H时i分s秒',
          value: 2,
        },
        {
          label: 'time_format-1',
          value: 3,
        },
        {
          label: 'time_format-2',
          value: 4,
        },
        {
          label: 'time_format-3',
          value: 5,
        },
      ],
      site_statusOptions: [
        {
          label: this.__('开启'),
          value: '1',
        },
        {
          label: this.__('关闭'),
          value: '2',
        },
      ],
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    __,
    async fetchData() {
      const { data } = await getList()
      this.form = {
        site_name: data.site_name,
        site_meta_description: data.site_meta_description,
        site_meta_keyword: data.site_meta_keyword,
        site_promotion: data.site_promotion,
        site_logo: data.site_logo,
        wap_site_logo: data.wap_site_logo,
        text_site_logo: data.text_site_logo,
        textmini_site_logo: data.textmini_site_logo,
        site_icon: data.site_icon,
        user_no_avatar: data.user_no_avatar,
        account_login_bg: data.account_login_bg,
        site_company_name: data.site_company_name,
        site_address: data.site_address,
        site_tel: data.site_tel,
        site_email: data.site_email,
        site_qq: data.site_qq,
        site_ww: data.site_ww,
        theme_id_wrap: data.theme_id_wrap,
        language_id_wrap: data.language_id_wrap,
        date_default_timezone_set_wrap: data.date_default_timezone_set_wrap,
        monetary_unit: data.monetary_unit,
        date_format_wrap: data.date_format_wrap,
        time_format_wrap: data.time_format_wrap,
        icp_number: data.icp_number,
        statistics_code: data.statistics_code,
        copyright: data.copyright,
        site_status: data.site_status,
        closed_reason: data.closed_reason,
        site_version: data.site_version,
      }
    },
    handleEdit() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          const { msg, status } = await doEdit({
            param: JSON.stringify(this.form),
          })

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