<template>
  <div class="store-base-container">
    <el-card class="box-card">
      <h2>{{ __('店铺运营设置') }}</h2>
      <span>{{ __('店铺运营设置-网站店铺内容基本选项设置') }}</span>
    </el-card>

    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane :label="__('店铺设置')" name="first">
        <el-form :model="storeForm">
          <el-form-item
            :label="__('店铺名称')"
            label-width="150px"
            prop="store_name"
          >
            <el-input
              v-model="storeForm.store_name"
              clearable
              :disabled="true"
              :placeholder="__('店铺名称')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item
            :label="__('店铺口号')"
            label-width="150px"
            prop="store_slogan"
          >
            <el-input
              v-model="storeForm.store_slogan"
              clearable
              :placeholder="__('当前发布版本')"
              :style="{ width: '100%' }"
            />
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item
                  :label="__('店铺log')"
                  label-width="150px"
                  prop="store_logo"
                  class="form-item-img-list"
                >
                  <upload
                    height="100px"
                    :image="storeForm.store_logo"
                    width="100px"
                    @upImage="
                      (image) => {
                        storeForm.store_logo = image
                      }
                    "
                  />
                  <el-form-item label="店铺二维码" class="QRcode">
                    <el-image
                      class="QRcode-img"
                      style="width: 100px; height: 100px"
                      :src="storeForm.wx_qrcode"
                      :previewSrcList="srcList"
                    ></el-image>
                  </el-form-item>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item
                  :label="__('店铺banner')"
                  label-width="150px"
                  prop="store_banner"
                >
                  <upload
                    height="48px"
                    :image="storeForm.store_banner"
                    width="240px"
                    @upImage="
                      (image) => {
                        storeForm.store_banner = image
                      }
                    "
                  />
                  <div>尺寸:1200 * 240</div>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item
                  label="营业状态"
                  label-width="150px"
                  prop="store_biz_state"
                >
                  <el-switch
                    v-model="storeForm.store_biz_state"
                    active-color="#13ce66"
                    :active-value="1"
                    :inactive-value="2"
                    inactive-color="#ff4949"
                    active-text="营业中"
                    @change="handleStoreStatus"
                    inactive-text="已打烊"
                  ></el-switch>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item
                  label="语音播报"
                  label-width="150px"
                  prop="ringtone_is_enable"
                >
                  <el-switch
                    v-model="storeForm.ringtone_is_enable"
                    :active-value="1"
                    :inactive-value="2"
                    @change="handleRingStatus"
                    active-text="开启"
                    inactive-text="关闭"
                  ></el-switch>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item
                  label="打包费"
                  label-width="150px"
                  prop="store_longitude"
                  :style="{ width: '100%' }"
                >
                  <el-input
                    v-model="storeForm.packing_fee"
                    clearable
                    placeholder="请输入打包费"
                    :style="{ width: '80%' }"
                  />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item
                  :label="__('店铺所在地')"
                  label-width="150px"
                  prop="store_district_id"
                >
                  <el-form-item>
                    <Area
                      v-model="queryArea"
                      width="395"
                      @fetch-data="fetchData"
                    />
                  </el-form-item>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item
                  :label="__('详细地址')"
                  label-width="70px"
                  prop="store_address"
                >
                  <keyword
                    :keyword="storeForm.store_address"
                    :location="queryArea.city.name"
                    :style="{ width: '80%' }"
                    @getAddress="getAddress"
                  />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item
                  :label="__('经度')"
                  label-width="150px"
                  prop="store_longitude"
                  :style="{ width: '100%' }"
                >
                  <el-input
                    v-model="storeForm.store_longitude"
                    clearable
                    disabled
                    :placeholder="__('经度')"
                    :style="{ width: '80%' }"
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item
                  :label="__('维度')"
                  label-width="70px"
                  prop="store_longitude"
                >
                  <el-input
                    v-model="storeForm.store_latitude"
                    clearable
                    disabled
                    :placeholder="__('维度')"
                    :style="{ width: '80%' }"
                  />
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item
                  :label="__('卖家电话')"
                  label-width="150px"
                  prop="store_tel"
                >
                  <el-input
                    v-model="storeForm.store_tel"
                    clearable
                    :placeholder="__('卖家电话')"
                    :style="{ width: '80%' }"
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item
                  :label="__('QQ')"
                  label-width="70px"
                  prop="store_qq"
                >
                  <el-input
                    v-model="storeForm.store_qq"
                    clearable
                    :placeholder="__('qq')"
                    :style="{ width: '80%' }"
                  />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-form-item
            v-if="false"
            :label="__('旺旺')"
            label-width="150px"
            prop="store_name"
          >
            <el-input
              v-model="storeForm.store_ww"
              clearable
              :placeholder="__('旺旺')"
              :style="{ width: '34%' }"
            />
          </el-form-item>

          <el-form-item
            :label="__('店铺介绍')"
            label-width="150px"
            prop="company_description"
          >
            <vab-quill
              ref="vab-quill"
              v-model="storeForm.company_description"
              :min-height="300"
              :options="options"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-s-tools"
              style="width: 100%"
              type="info"
              @click="handleEdit(getStoreParams())"
            >
              {{ __('修改') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane :label="__('幻灯片设置')" name="second">
        <el-form :model="slideShowForm">
          <el-row :gutter="20" style="margin-left: 160px">
            <el-col
              v-for="(item, index) in slideShowForm.store_slide"
              :key="index"
              :span="4"
            >
              <el-form-item
                label-width="150px"
                prop="img"
                style="
                  margin-top: 30px;
                  margin-left: -150px;
                  height: 76px;
                  line-height: 76px;
                "
              >
                <upload
                  height="76px"
                  :image="item.img"
                  width="146px"
                  @upImage="
                    (image) => {
                      item.img = image
                    }
                  "
                />
              </el-form-item>
              <el-form-item prop="url">
                <el-input
                  v-model="item.url"
                  :placeholder="__('填写幻灯片链接')"
                />
              </el-form-item>
              <el-form-item prop="name">
                <el-input v-model="item.name" :placeholder="__('标题')" />
              </el-form-item>
              <el-form-item prop="check">
                <el-switch
                  v-model="item.check"
                  active-text="启动"
                  inactive-text="停用"
                  @change="handleEdit(getSlideShowForm())"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button
              icon="el-icon-s-tools"
              style="width: 100%"
              type="info"
              @click="handleEdit(getSlideShowForm())"
            >
              {{ __('修改') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane :label="__('实体店铺信息')" name="third">
        <el-form :model="physicalStoreForm">
          <el-form-item
            :label="__('购买须知')"
            label-width="150px"
            prop="store_notice"
            style="margin-top: 30px; margin-left: 45px"
          >
            <el-input
              v-model="physicalStoreForm.store_notice"
              clearable
              :placeholder="__('购买须知')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item
            :label="__('提供服务')"
            label-width="150px"
            prop="store_o2o_tags"
            style="margin-top: 30px; margin-left: 45px"
          >
            <el-select
              v-model="physicalStoreForm.store_o2o_tags"
              allow-create
              default-first-option
              filterable
              multiple
              :placeholder="__('提供服务')"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in optionslist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="__('营业时间')"
            label-width="150px"
            prop="store_opening_hours"
            style="margin-top: 30px; margin-left: 45px"
          >
            <el-time-picker
              v-model="physicalStoreForm.store_opening_hours"
              format="HH:mm"
              :placeholder="__('任意时间点')"
              :style="{ width: '100%' }"
              value-format="HH:mm"
            />
          </el-form-item>
          <el-form-item
            :label="__('打烊时间')"
            label-width="150px"
            prop="store_close_hours"
            style="margin-top: 30px; margin-left: 45px"
          >
            <el-time-picker
              v-model="physicalStoreForm.store_close_hours"
              format="HH:mm"
              :placeholder="__('任意时间点')"
              :style="{ width: '100%' }"
              value-format="HH:mm"
            />
          </el-form-item>
          <el-form-item
            :label="__('所属商圈')"
            label-width="150px"
            prop="store_circle"
            style="margin-top: 30px; margin-left: 45px"
          >
            <tree
              v-model="physicalStoreForm.store_circle"
              :default-props="defaultProps"
              node-key="market_category_id"
              :tree-data="treeData"
            />
          </el-form-item>
          <el-form-item
            :label="__('线下优惠买单折扣')"
            label-width="150px"
            prop="store_discount"
            style="margin-top: 30px; margin-left: 45px"
          >
            <el-input
              v-model="physicalStoreForm.store_discount"
              clearable
              :placeholder="__('线下优惠买单折扣')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-s-tools"
              style="width: 100%"
              type="info"
              @click="handleEdit(getPhysicalStoreParams())"
            >
              {{ __('修改') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="__('其他设置')" name="fourth">
        <el-form :model="storeConfigForm">
          <el-form-item :label="__('是否开票')" prop="check">
            <el-switch
              v-model="storeConfigForm.sc_is_enabled_invoice"
              active-text="启动"
              inactive-text="停用"
              @change="handleEdit(getStoreConfigForm())"
            />
          </el-form-item>
          <el-button
            icon="el-icon-s-tools"
            style="width: 100%"
            type="info"
            @click="handleEdit(getStoreConfigForm())"
          >
            {{ __('修改') }}
          </el-button>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import VabQuill from '@/extra/VabQuill'
  import Area from '@/components/VabArea/area'
  import upload from '@/components/upload'
  import tree from '@/components/universalTreeSelect.vue'
  import keyword from '@/components/baiduMap/keyword'
  import { get, storeSetUp } from '@/api/store/base'
  import { getTree } from '@/api/base/market/category'
  import { handleMatched } from '@/utils/routes'

  export default {
    name: 'SetUpShop',
    components: { VabQuill, Area, upload, keyword, tree },
    data() {
      return {
        tableConfig: {
          height: window.innerHeight - 220 - 90,
        },
        test: 666,
        treeData: [],
        activeName: 'first',
        optionslist: [
          {
            value: '1001',
            label: this.__('免费停车'),
          },
          {
            value: '1002',
            label: this.__('免费WiFi'),
          },
          {
            value: '1003',
            label: this.__('免费送货'),
          },
        ],
        value: '',
        options: {
          theme: 'snow',
          bounds: document.body,
          debug: 'warn',
          modules: {
            toolbar: {
              container: [
                ['bold', 'italic', 'underline', 'strike'],
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [{ size: ['small', false, 'large', 'huge'] }],
                [{ color: [] }, { background: [] }],
                ['blockquote', 'code-block'],
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ script: 'sub' }, { script: 'super' }],
                [{ indent: '-1' }, { indent: '+1' }],
                [{ align: [] }],
                [{ direction: 'rtl' }],
                [{ font: [] }],
                ['clean'],
                ['link', 'image', 'vab-upload-image'],
              ],
            },
          },
          placeholder: '',
          readOnly: false,
          isRest: false,
        },
        defaultProps: {
          label: 'category_name',
          children: 'children',
          disabled: 'disabled',
        },
        storeForm: {},
        slideShowForm: {
          store_slide: [
            { img: '', check: true, name: '' },
            { img: '', check: true, name: '' },
            { img: '', check: true, name: '' },
            { img: '', check: true, name: '' },
            { img: '', check: true, name: '' },
          ],
        },
        physicalStoreForm: {
          store_notice: undefined,
          store_o2o_tags: [],
          store_opening_hours: undefined,
          store_close_hours: undefined,
          store_discount: undefined,
          store_circle: undefined,
        },
        storeConfigForm: {
          sc_is_enabled_invoice: undefined,
        },
        form: {
          store_name: undefined,
          store_logo: undefined,
          store_slogan: undefined,
          store_address: undefined,
          store_longitude: '',
          store_latitude: '',
          str_store_area: undefined,
          store_tel: undefined,
          store_opening_hours: undefined,
          store_circle: undefined,
          store_discount: undefined,
          store_close_hours: undefined,
          store_qq: undefined,
          company_description: undefined,
          store_banner: undefined,
          store_ww: undefined,
          store_notice: undefined,
          store_o2o_tags: [],
          store_district_id: '',
          packing_fee: 0,
        },
        queryArea: {
          province: { code: '', name: '' },
          city: { code: '', name: '' },
          district: { code: '', name: '' },
        },
        srcList: [],
      }
    },
    created() {
      this.fetchData()
      this.getTree()
    },
    methods: {
      getPhysicalStoreParams() {
        const form = this.physicalStoreForm
        let params = {
          store_notice: form.store_notice,
          // store_o2o_tags: form.store_o2o_tags.toString(),
          store_opening_hours: form.store_opening_hours,
          store_close_hours: form.store_close_hours,
          store_discount: form.store_discount,
          store_circle: form.store_circle,
        }
        return params
      },
      getStoreParams() {
        const form = this.storeForm
        let params = {
          store_name: form.store_name,
          store_slogan: form.store_slogan,
          store_logo: form.store_logo,
          store_banner: form.store_banner,
          store_address: form.store_address,
          store_longitude: form.store_longitude,
          store_latitude: form.store_latitude,
          store_tel: form.store_tel,
          ringtone_is_enable:form.ringtone_is_enable,
          store_qq: form.store_qq,
          store_ww: form.store_ww,
          company_description: form.company_description,
          store_biz_state: form.store_biz_state,
          packing_fee: form.packing_fee,
        }

        if (this.queryArea.province.name) {
          params.store_area = this.queryArea.province.name
        }
        if (this.queryArea.city.name) {
          params.store_area += '/' + this.queryArea.city.name
        }
        if (this.queryArea.district.name) {
          params.store_area += '/' + this.queryArea.district.name
        }

        if (this.queryArea.province.code) {
          params.store_district_id = this.queryArea.province.code
        }
        if (this.queryArea.city.code) {
          params.store_district_id += '/' + this.queryArea.city.code
        }
        if (this.queryArea.district.code) {
          params.store_district_id += '/' + this.queryArea.district.code
        }

        return params
      },
      handleStoreStatus(e) {
        this.storeForm.store_biz_state = e
      },
      handleRingStatus(e) {
        this.storeForm.ringtone_is_enable = e
        console.log('ringtone_is_enable:', this.storeForm.ringtone_is_enable)
      },
      getSlideShowForm() {
        const form = this.slideShowForm
        let params = {
          store_slide: JSON.stringify(form.store_slide),
        }
        return params
      },
      getStoreConfigForm() {
        const form = this.storeConfigForm
        let params = {
          sc_is_enabled_invoice: JSON.stringify(form.sc_is_enabled_invoice),
        }
        return params
      },
      __,
      upImage(image, index) {
        this.form.store_slide[index].img = image
      },

      async handleEdit(params) {
        console.log('handleEdit params:', params)
        this.$baseConfirm(
          this.__('修改立马生效,是否继续？'),
          null,
          async () => {
            const { msg, status } = await storeSetUp(params)
            if (200 == status) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
            await this.fetchData()
          }
        )
      },
      handleParams() {
        let params = Object.assign({}, this.form)
        params.store_o2o_tags = this.form.store_o2o_tags.toString()
        params.store_slide = JSON.stringify(params.store_slide)
        return params
      },
      async fetchData(params) {
        const { data } = await get({ params })
        this.initData(data)
      },
      async getTree() {
        const { data } = await getTree()
        if (data) {
          this.treeData = data
        } else {
          this.treeData = []
        }
      },
      initData(data) {
        this.physicalStoreForm = {
          store_notice: data.info.store_notice,
          store_opening_hours: data.info.store_opening_hours,
          store_close_hours: data.info.store_close_hours,
          store_discount: data.info.store_discount,
          store_circle: Number(data.store_circle),
        }
        this.storeConfigForm = {
          sc_is_enabled_invoice: data.sc_is_enabled_invoice,
        }
        if (data.store_o2o_tags) {
          this.physicalStoreForm.store_o2o_tags = data.store_o2o_tags.split(',')
        }

        this.storeForm = {
          store_name: data.store_name,
          store_slogan: data.store_slogan,
          store_logo: data.store_logo,
          store_banner: data.info.store_banner,
          store_address: data.store_address,
          store_longitude: data.store_longitude,
          store_latitude: data.store_latitude,
          store_tel: data.info.store_tel,
          store_qq: data.info.store_qq,
          store_ww: data.info.store_ww,
          company_description: data.company.company_description,
          wx_qrcode: data.wx_qrcode,
          store_biz_state: data.store_biz_state,
          packing_fee: data.packing_fee,
          ringtone_is_enable: data.ringtone_is_enable,
        }

        this.srcList.push(data.wx_qrcode)
        if (data.info.store_slide && data.info.store_slide.length > 0) {
          this.slideShowForm.store_slide = data.info.store_slide
        } else {
          this.slideShowForm = {
            store_slide: [
              { img: '', check: true, name: '' },
              { img: '', check: true, name: '' },
              { img: '', check: true, name: '' },
              { img: '', check: true, name: '' },
              { img: '', check: true, name: '' },
            ],
          }
        }

        const store_area = data.store_area.split('/')
        const store_district_id = data.store_district_id.split(',')

        this.initQueryArea(store_district_id, store_area)
        this.form.store_o2o_flag = data.store_o2o_flag
      },
      initQueryArea(store_district_id, store_area) {
        if (!store_district_id && store_area) return
        if (store_district_id[0]) {
          this.queryArea.province.code = store_district_id[0]
        }
        if (store_district_id[1]) {
          this.queryArea.city.code = store_district_id[1]
        }
        if (store_district_id[2]) {
          this.queryArea.district.code = store_district_id[2]
        }
        if (store_area[0]) {
          this.queryArea.province.name = store_area[0]
        }
        if (store_area[1]) {
          this.queryArea.city.name = store_area[1]
        }
        if (store_area[2]) {
          this.queryArea.district.name = store_area[2]
        }
      },
      getAddress(address) {
        this.storeForm.store_address = address.value
        this.storeForm.store_longitude = address.lng
        this.storeForm.store_latitude = address.lat
      },
    },
  }
</script>
<style lang="scss">
  .config-save {
    color: white;
    text-align: center;
    background-color: #2c2e30;
    padding: 12px;
  }

  .config-save:hover {
    background-color: #3d3d3d;
  }

  .form-item-img-list {
    .el-form-item__content {
      display: flex;
      margin: 0;
    }
  }

  .QRcode {
    display: flex;
    margin-left: 40px;

    .QRcode-img {
      border: 1px solid #cccccc;
      border-radius: 6px;
    }
  }
</style>
