<template>
  <div class="store-contract-container">
    <el-row>
      <el-col v-for="item in list" :key="item.contract_id" :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>
              <el-image
                :src="item.contract_type_icon"
                style="width: 135px; height: 135px"
              />
            </span>
            <span>{{ item.contract_type_text }}</span>
            <br />
          </div>
          <span>
            <el-button
              v-show="
                item.contract_use_state === 2 || item.contract_use_state == ''
              "
              style="
                width: 100%;
                color: white;
                background-color: black;
                height: 40px;
              "
              type="text"
              @click="handleEdit(item, 1)"
            >
              {{ __('加入') }}
            </el-button>
          </span>
          <span>
            <el-button
              v-show="item.contract_use_state === 1"
              style="
                width: 100%;
                color: white;
                background-color: black;
                height: 40px;
              "
              type="text"
              @click="handleEdit(item, 2)"
            >
              {{ __('退出') }}
            </el-button>
          </span>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { doEdit } from '@/api/store/contract'
  import { List } from '@/api/base/contract/type'
  import { translateTitle as __ } from '@/utils/i18n'

  export default {
    name: 'StoreContract',
    components: {},
    data() {
      return {
        list: [],
        form: {},
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      __,

      handleAvatarSuccess(name, res) {
        this.form[name] = res.data
      },
      BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      async handleEdit(row, contract_use_state) {
        this.$baseConfirm(
          this.__('修改立马生效,是否继续？'),
          null,
          async () => {
            this.form.contract_type_name = row.contract_type_name
            this.form.contract_id = row.contract_id
            this.form.contract_type_name = row.contract_type_name
            this.form.contract_type_id = row.contract_type_id
            this.form.contract_deposit = row.contract_type_deposit
            this.form.contract_state = 9
            this.form.store_name = row.store_name
            this.form.store_id = row.store_id
            this.form.contract_use_state = contract_use_state
            const { msg, status } = await doEdit(this.form)
            if (200 == status) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
            await this.fetchData()
          }
        )
      },

      async fetchData() {
        const { data } = await List()
        this.list = data
      },
    },
  }
</script>
