<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ __('订货流程设置') }}</span>
        <h3 style="color: red">
          {{ __('注意：如果有未处理的订单不要修改这里的订单处理流程！！！') }}
        </h3>
      </div>
      <el-row align="middle" type="flex">
        <el-col :span="4">
          <el-col>
            <el-divider class="divider-config">
              <el-button
                circle
                class="button-config"
                icon="el-icon-setting"
                :type="isProcessHighlight(2010)"
                @click="isProcessEnable(2010)"
              />
            </el-divider>
          </el-col>
          <el-col>
            <span class="font-config">{{ __('支付') }}</span>
          </el-col>
        </el-col>
        <el-col :span="4">
          <el-col>
            <el-divider class="divider-config">
              <el-button
                circle
                class="button-config"
                icon="el-icon-setting"
                :type="isProcessHighlight(2011)"
                @click="isProcessEnable(2011)"
              />
            </el-divider>
          </el-col>
          <el-col>
            <span class="font-config">{{ __('订单审核') }}</span>
          </el-col>
        </el-col>
        <el-col :span="4">
          <el-col>
            <el-divider class="divider-config">
              <el-button
                circle
                class="button-config"
                icon="el-icon-setting"
                :type="isProcessHighlight(2013)"
                @click="isProcessEnable(2013)"
              />
            </el-divider>
          </el-col>
          <el-col>
            <span class="font-config">{{ __('财务审核') }}</span>
          </el-col>
        </el-col>
        <el-col :span="4">
          <el-col>
            <el-divider class="divider-config">
              <el-button
                circle
                class="button-config"
                icon="el-icon-setting"
                type="primary"
              />
            </el-divider>
          </el-col>
          <el-col>
            <span class="font-config">{{ __('出库审核') }}</span>
          </el-col>
        </el-col>
        <el-col :span="4">
          <el-col>
            <el-divider class="divider-config">
              <el-button
                circle
                class="button-config"
                icon="el-icon-setting"
                :type="isProcessHighlight(2040)"
                @click="isProcessEnable(2040)"
              />
            </el-divider>
          </el-col>
          <el-col>
            <span class="font-config">{{ __('发货确认') }}</span>
          </el-col>
        </el-col>
        <el-col :span="4">
          <el-col>
            <el-divider class="divider-config">
              <el-button
                circle
                class="button-config"
                icon="el-icon-setting"
                type="primary"
              />
            </el-divider>
          </el-col>
          <el-col>
            <span class="font-config">{{ __('【客户】收货确认') }}</span>
          </el-col>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ __('退货流程设置') }}</span>
      </div>
      <el-row align="middle" type="flex">
        <el-col :span="4">
          <el-col>
            <el-divider class="divider-config">
              <el-button
                circle
                class="button-config"
                icon="el-icon-setting"
                type="primary"
              />
            </el-divider>
          </el-col>
          <el-col>
            <span class="font-config">{{ __('【客户】提交退单') }}</span>
          </el-col>
        </el-col>
        <el-col :span="4">
          <el-col>
            <el-divider class="divider-config">
              <el-button
                circle
                class="button-config"
                icon="el-icon-setting"
                type="primary"
              />
            </el-divider>
          </el-col>
          <el-col>
            <span class="font-config">{{ __('退单审核') }}</span>
          </el-col>
        </el-col>
        <el-col :span="4">
          <el-col>
            <el-divider class="divider-config">
              <el-button
                circle
                class="button-config"
                icon="el-icon-setting"
                :type="isReturnProcessHighlight(3110)"
                @click="isReturnProcessEnable(3110)"
              />
            </el-divider>
          </el-col>
          <el-col>
            <span class="font-config">{{ __('收货确认') }}</span>
          </el-col>
        </el-col>
        <el-col :span="4">
          <el-col>
            <el-divider class="divider-config">
              <el-button
                circle
                class="button-config"
                icon="el-icon-setting"
                :type="isReturnProcessHighlight(3115)"
                @click="isReturnProcessEnable(3115)"
              />
            </el-divider>
          </el-col>
          <el-col>
            <span class="font-config">{{ __('退款确认') }}</span>
          </el-col>
        </el-col>
        <el-col :span="4">
          <el-col>
            <el-divider class="divider-config">
              <el-button
                circle
                class="button-config"
                icon="el-icon-setting"
                type="primary"
              />
            </el-divider>
          </el-col>
          <el-col>
            <span class="font-config">{{ __('完成') }}</span>
          </el-col>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { translateTitle as __ } from '@/utils/i18n'
import { getConfig, edit } from '@/api/store/config'

export default {
  name: 'StoreConfig',
  components: {},
  data() {
    return {
      sc_order_process: [],
      sc_order_return_process: [],
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    __,
    async fetchData() {
      const { data } = await getConfig()
      if (data && data.sc_order_process) {
        this.sc_order_process = data.sc_order_process
        this.initProcess()
      }
      if (data && data.sc_order_return_process) {
        this.initReturnProcess()
        this.sc_order_return_process = data.sc_order_return_process
      }
    },
    isProcessHighlight(code) {
      let index = this.sc_order_process.indexOf(code)
      return this.isHighlight(index)
    },
    isReturnProcessHighlight(code) {
      let index = this.sc_order_return_process.indexOf(code)
      return this.isHighlight(index)
    },
    isHighlight(index) {
      if (index === -1) {
        return 'circle'
      }
      return 'primary'
    },
    isProcessEnable(code) {
      let index = this.sc_order_process.indexOf(code)
      if (index === -1) {
        this.sc_order_process.push(code)
      } else {
        this.sc_order_process.splice(index, 1)
      }
      this.saveConfig()
    },
    isReturnProcessEnable(code) {
      let index = this.sc_order_return_process.indexOf(code)
      if (index === -1) {
        this.sc_order_return_process.push(code)
      } else {
        this.sc_order_return_process.splice(index, 1)
      }
      this.saveConfig()
    },
    async saveConfig() {
      this.sc_order_process.sort((a, b) => a - b)
      this.sc_order_return_process.sort((a, b) => a - b)
      const { msg, status } = await edit({
        sc_order_process: this.sc_order_process.toString(),
        sc_order_return_process: this.sc_order_return_process.toString(),
      })
      if (200 == status) {
        this.$baseMessage(msg, 'success')
      } else {
        this.$baseMessage(msg, 'error')
      }
      this.fetchData()
    },
    initProcess() {
      let index = this.sc_order_process.indexOf(2020)
      if (index === -1) {
        this.sc_order_process.push(2020)
      }

      index = this.sc_order_process.indexOf(2030)
      if (index === -1) {
        this.sc_order_process.push(2030)
      }
    },
    initReturnProcess() {
      let index = this.sc_order_return_process.indexOf(3100)
      if (index === -1) {
        this.sc_order_return_process.push(3100)
      }
      index = this.sc_order_process.indexOf(3105)
      if (index === -1) {
        this.sc_order_return_process.push(3105)
      }
      index = this.sc_order_process.indexOf(3125)
      if (index === -1) {
        this.sc_order_return_process.push(3125)
      }
    },
  },
}
</script>
<style>
.button-config {
  display: block;
  margin: auto;
}

.font-config {
  text-align: center;
  display: block;
  margin-top: 8px;
}

.button-config .el-icon-setting:before {
  font-size: x-large;
}

.divider-config {
  margin: 24px 0 !important;
}
</style>
