<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_district_id"
                >
                  <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="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: '',
      },
      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,
        store_qq: form.store_qq,
        store_ww: form.store_ww,
        company_description: form.company_description,
        store_biz_state:form.store_biz_state
      }

      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;
    },
    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) {
      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()
      console.log(data)
      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
      }

      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>
