<template>

  <div class="execution">

    <basic-container v-loading="loading">

      <div class="zm_info_header">
        <span>{{info.shopName}}</span>
      </div>

      <div class="zm_info_body">
        <div class="zm_info_row">
          <div class="zm_label">商家名称</div>
          <div>{{info.shopName || ''}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">商家分类</div>
          <div>{{info.className || ''}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">负责人</div>
          <div>{{info.owner || ''}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">联系电话</div>
          <div>{{info.phone || ''}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">身份证号码</div>
          <div>{{info.idNumber || ''}}</div>
        </div>
        <div class="zm_info_row" v-if="idCardImages.length > 0">
          <div class="zm_label">身份证正反面</div>
          <div class="layout_h">
            <el-image
              v-for="(item, index) in idCardImages"
              class="image_item"
              :key="index"
              :src="item"
              :preview-src-list="idCardImages"
              fit="cover">
            </el-image>
          </div>
        </div>
        <div class="zm_info_row" v-if="certificates.length > 0">
          <div class="zm_label">营业执照</div>
          <div class="layout_h">
            <el-image
              v-for="(item, index) in certificates"
              class="image_item"
              :key="index"
              :src="item"
              :preview-src-list="certificates"
              fit="cover">
            </el-image>
          </div>
        </div>
        <div class="zm_info_row" v-if="shopImages.length > 0">
          <div class="zm_label">商店照片</div>
          <div class="layout_h">
            <el-image
              v-for="(item, index) in shopImages"
              class="image_item"
              :key="index"
              :src="item"
              :preview-src-list="shopImages"
              fit="cover">
            </el-image>
          </div>
        </div>
        <div class="zm_info_row" v-if="otherImages.length > 0">
          <div class="zm_label">其他资质</div>
          <div class="layout_h">
            <el-image
              v-for="(item, index) in otherImages"
              class="image_item"
              :key="index"
              :src="item"
              :preview-src-list="otherImages"
              fit="cover">
            </el-image>
          </div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">查看合同</div>
          <div>
            <el-button type="text" v-if="info.contractInfo">查看合同</el-button>
            <span>未签约</span>
          </div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">商品认证视频</div>
          <div>{{info.needVideoProof == 1 ? "需要上传" : "不需要上传"}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">保证金</div>
          <div>{{info.deposit || 0}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">状态</div>
          <div>{{statusName}}</div>
        </div>
      </div>

      <div class="zm_info_header">
        <span>退货收件地址管理</span>
      </div>

      <div class="zm_info_body">
        <el-form ref="addressForm" :model="form" :rules="rules" label-width="80px" >
          <el-form-item label="收件人" prop="name">
            <el-input v-model="form.name" placeholder="输入收件人" style="width: 200px;" :disabled="!editing"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone" >
            <el-input v-model="form.phone" placeholder="输入联系电话" style="width: 200px;" :disabled="!editing"></el-input>
          </el-form-item>
          <el-form-item label="退货地址" prop="address" >
            <el-input v-model="form.address" placeholder="输入退货地址" style="width: 400px;" :disabled="!editing"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="onSaveAddress" style="width: 100px;" class="self_center" :loading="saving" type="primary">{{editing ? '保存' : '编辑'}}</el-button>
      </div>

    </basic-container>

  </div>

</template>

<script>

  import { shopInfo, editAddress } from '@/api/shop/shop.js'
  import { ZmMixin } from '@/mixins/ZmMixin.js'
  import { mapState } from 'vuex'

  export default {
    mixins: [ZmMixin],
    components: {
      // 'uploader': () => import('@/components/uploader.vue')
    },
    data() {
      return {
        editing: false,
        saving: false,
        loading: false,
        info: {},
        form: {
          name: '',
          phone: '',
          address: ''
        },
        rules: {
          name: [{
            trigger: 'blur',
            required: true,
            message: '请输入收件人'
          }],
          phone: [{
            trigger: 'blur',
            required: true,
            message: '请输入联系电话'
          }],
          address: [{
            trigger: 'blur',
            required: true,
            message: '请输入退货地址'
          }]
        }
      }
    },
    mounted() {
      this.loadInfo()
    },
    computed: {
      idCardImages() {
        if(this.info) {
          let urls = []
          let pUrl = this.info.idPositive
          let nUrl = this.info.idNegative
          if(pUrl) {
            urls.push(pUrl)
          }
          if(nUrl) {
            urls.push(nUrl)
          }
          return urls
        }
        return []
      },
      certificates() {
        if(this.info) {
          let urls = []
          let operateImg = this.info.operateImg
          if(operateImg) {
            urls.push(operateImg)
          }
          return urls
        }
        return []
      },
      shopImages() {
        if(this.info) {
          let urls = []
          let shopImg = this.info.shopImg
          if(shopImg) {
            urls = shopImg.split(",")
          }
          return urls
        }
        return []
      },
      otherImages() {
        if(this.info) {
          let urls = []
          let otherImg = this.info.otherImg
          if(otherImg) {
            urls = otherImg.split(",")
          }
          return urls
        }
        return []
      },
      statusName() {
        if(this.info) {
          if(this.info.status == 1) {
            return "启用"
          } else if(this.info.status == 2) {
            return "冻结"
          } else {
            return "删除"
          }
        }
        return ""
      }
    },
    methods: {
      loadInfo() {
        this.loading = true
        shopInfo().then(r => {
          this.loading = false
          this.info = this.zmRes(r)
          if(this.info.returnAddress) {
            this.form = JSON.parse(this.info.returnAddress)
          }
        }).catch(r => {
          this.loading = false
          this.error('加载信息失败')
        })
      },
      onSaveAddress() {
        if(this.editing) {
          this.$refs['addressForm'].validate(valid => {
            if(valid) {
              this.saving = true
              editAddress(this.form)
              .then(r => {
                this.saving = false
                this.editing = false
                this.success('修改成功！')
              })
              .catch(e => {
                this.saving = false
                this.error('保存失败')
              })
            }
            return valid
          })
        } else {
          this.editing = true
        }
      }
    }
  }

</script>

<style scoped>

  .zm_info_header {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    background: #dedede;
  }

  .zm_info_body {
    display: flex;
    flex-direction: column;
    padding: 16px;
  }

  .zm_info_row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .zm_label {
    width: 120px;
  }

  .zm_info_body .zm_info_row:not(:first-child) {
    margin-top: 10px;
  }

  .image_item {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }

</style>
