<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs v-model="storeTab" @tab-click="onChangeStoreTab" class="store-tabs">
          <el-tab-pane label="基本信息" name="1"></el-tab-pane>
          <el-tab-pane label="结算账号" name="2"></el-tab-pane>
        </el-tabs>
      </div>

      <el-row :gutter="20">
        <el-form v-loading="loading" ref="elForm" :model="form" :rules="rules" class="store-form">
          <!-- 基本信息 -->
          <template v-if="storeTab == '1'">
            <template v-if="storeTab1actionPage == '1'">
              <el-descriptions title="门店信息" :column="2" border class="store-descriptions">
                <template slot="extra">
                  <el-button type="primary" size="medium" @click="handelActionStoreTab1" v-hasPermi="['system:store:edit']">
                    <i class="el-icon-edit"></i> 编辑
                  </el-button>
                </template>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-discount"></i>门店编号</template>
                  <span class="description-content">{{form.code}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-office-building"></i>门店名称</template>
                  <span class="description-content">{{form.name}}</span>
                </el-descriptions-item>
                <el-descriptions-item span="2">
                  <template slot="label"><i class="el-icon-money"></i>门店免洗额度</template>
                  <span class="description-content">{{form.balance}}</span>
                </el-descriptions-item>
                <el-descriptions-item span="2">
                  <template slot="label"><i class="el-icon-picture"></i>门店照片</template>
                  <el-image class="store-image" :src="form.companyPic" fit="cover"></el-image>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-connection"></i>授权日期</template>
                  <span class="description-content">{{form.openDateParse}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-time"></i>营业时间</template>
                  <span class="description-content">{{form.businessStartTime}} - {{form.businessEndTime}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-s-flag"></i>门店状态</template>
                  <el-tag :type="form.status === '0' ? 'success' : 'danger'" size="small">
                    {{form.status === '0' ? '正常' : '禁用'}}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-phone"></i>服务热线</template>
                  <span class="description-content">{{form.contactWorkTel}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-printer"></i>是否打印小票</template>
                  <el-tag :type="form.isPrint === '0' ? 'success' : 'info'" size="small">
                    {{form.isPrint === '0' ? '是' : '否'}}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-user"></i>小票是否打印客户姓名</template>
                  <el-tag :type="form.isPrintName === '0' ? 'success' : 'info'" size="small">
                    {{form.isPrintName === '0' ? '是' : '否'}}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item span="2">
                  <template slot="label"><i class="el-icon-s-comment"></i>店铺说明</template>
                  <span class="description-content">{{form.companyDetail}}</span>
                </el-descriptions-item>
                <el-descriptions-item span="2">
                  <template slot="label"><i class="el-icon-location-information"></i>详细地址</template>
                  <span class="description-content">{{form.address}}</span>
                </el-descriptions-item>
              </el-descriptions>
            </template>

            <!-- 详情编辑 -->
            <template v-if="storeTab1actionPage == '0'">
              <el-descriptions title="门店信息" :column="2" border class="store-descriptions">
                <template slot="extra">
                  <el-button @click="cancelForm">取消</el-button>
                  <el-button type="primary" @click="submitForm">保存</el-button>
                </template>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-discount"></i>门店编号</template>
                  <span class="description-content">{{form.code}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-office-building"></i>门店名称</template>
                  <span class="description-content">{{form.name}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-connection"></i>授权日期</template>
                  <span class="description-content">{{form.openDateParse}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-s-flag"></i>门店状态</template>
                  <el-tag :type="form.status === '0' ? 'success' : 'danger'" size="small">
                    {{form.status === '0' ? '正常' : '禁用'}}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-position"></i>所在区域</template>
                  <span class="description-content">{{form.provinceName}}{{form.cityName}}{{form.areaName}}</span>
                </el-descriptions-item>
              </el-descriptions>

              <div class="edit-form">
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="详细地址" prop="address">
                      <el-input v-model="form.address" placeholder="请输入详细地址" maxlength="200" show-word-limit />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="店铺说明" prop="companyDetail">
                      <el-input type="textarea" v-model="form.companyDetail" placeholder="请输入店铺说明" maxlength="500" show-word-limit />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="服务热线" prop="contactWorkTel">
                      <el-input v-model="form.contactWorkTel" placeholder="请输入服务热线" maxlength="12" show-word-limit />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否打印小票" prop="isPrint">
                      <el-select v-model="form.isPrint" placeholder="请选择" class="full-width">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="小票是否打印客户姓名" prop="isPrintName">
                      <el-select v-model="form.isPrintName" placeholder="请选择" class="full-width">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="门店照片" prop="companyPic">
                      <image-upload v-model="form.companyPic" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="营业时间">
                      <el-time-picker is-range v-model="businessTimeList" format="HH:mm" value-format="HH:mm" range-separator="至"
                        start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" class="full-width">
                      </el-time-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </template>
          </template>

          <!-- 账号信息 -->
          <template v-if="storeTab == '2'">
            <el-descriptions title="账号信息" :column="1" border class="store-descriptions">
              <template slot="extra" v-if="storeTab2actionPage == '1'">
                <el-button type="primary" size="medium" @click="handelActionStoreTab2" v-hasPermi="['system:store:edit']">
                  <i class="el-icon-edit"></i> 编辑
                </el-button>
              </template>
              <template slot="extra" v-if="storeTab2actionPage == '0'">
                <el-button @click="cancelForm">取消</el-button>
                <el-button type="primary" @click="submitForm">保存</el-button>
              </template>
              <template v-if="storeTab2actionPage == '1'">
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-bank-card"></i>开户行</template>
                  <span class="description-content">{{form.bankName}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-user"></i>姓名</template>
                  <span class="description-content">{{form.bankUserName}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-credit-card"></i>银行卡号</template>
                  <span class="description-content">{{form.bankCardNumber}}</span>
                </el-descriptions-item>
              </template>
            </el-descriptions>
            <template v-if="storeTab2actionPage == '0'">
              <div class="edit-form">
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="开户行" prop="bankName">
                      <el-input v-model="form.bankName" placeholder="请输入开户行" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="姓名" prop="bankUserName">
                      <el-input v-model="form.bankUserName" placeholder="请输入姓名" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="银行卡号" prop="bankCardNumber">
                      <el-input v-model="form.bankCardNumber" placeholder="请输入银行卡号" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </template>
          </template>
        </el-form>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {
  getStoreInfo,
  updateStore
} from "@/api/system/store";
import { formatDate } from '@/utils'
export default {
  name: "storeBase",
  dicts: ['goods_type', 'sys_normal_disable'],
  data() {
    return {
      storeTab: '1',
      storeTab1actionPage: '1',
      storeTab2actionPage: '1',
      businessTimeList: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      storeBaseVO: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      options: [{
        value: '0',
        label: '正常'
      }, {
        value: '1',
        label: '禁用'
      }],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handelActionStoreTab1() {
      this.storeTab1actionPage = '0'
    },
    handelActionStoreTab2() {
      this.storeTab2actionPage = '0'
    },
    onChangeStoreTab() {
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询 */
    getList() {
      this.loading = true;
      this.businessTimeList = [];
      getStoreInfo().then(response => {
        this.form = response.data;
        this.businessTimeList.push(response.data.businessStartTime != null && response.data.businessStartTime != '' ? response.data.businessStartTime : '');
        this.businessTimeList.push(response.data.businessEndTime != null && response.data.businessEndTime != '' ? response.data.businessEndTime : '');
        if (this.form.openDate != null) {
          this.form.openDateParse = new Date(this.form.openDate).toLocaleDateString();
        }
        this.storeTab1actionPage = '1';
        this.storeTab2actionPage = '1';
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        createBy: null,
        createById: null,
        createTime: null,
        updateBy: null,
        updateById: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    cancelForm() {
      this.getList();
    },
    /** 提交按钮 */
    submitForm() {
      if (this.form.id != null) {
        console.log(this.businessTimeList)
        this.form.businessStartTime = this.businessTimeList[0]
        this.form.businessEndTime = this.businessTimeList[1]
        updateStore(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.getList();
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
  
  .box-card {
    margin-bottom: 20px;
    
    .store-tabs {
      margin-bottom: 20px;
    }
  }

  .store-form {
    max-width: 1000px;
    margin: 0 auto;
  }

  .store-descriptions {
    margin-bottom: 20px;
    
    .description-content {
      color: #606266;
      font-size: 14px;
    }
  }

  .store-image {
    width: 120px;
    height: 120px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .edit-form {
    margin-top: 20px;
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;

    .full-width {
      width: 100%;
    }

    .el-form-item {
      margin-bottom: 20px;
    }
  }

  .el-button {
    margin-left: 10px;
    
    i {
      margin-right: 5px;
    }
  }

  .el-tag {
    margin-right: 5px;
  }
}
</style>
