<template>
  <div class="app-container home">
    <el-card class="update-log" shadow="never" style="margin-bottom: 10px">
      <div class="body">
        <div class="header-title">
          <span>品牌信息</span>
          <div>
            <el-button type="text" @click="editBrandInfo">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button v-if="authInfo.id" type="text" @click="showBrandAuth"
              >更新认证</el-button
            >
            <el-button v-else type="text" @click="showBrandAuth"
              >认证</el-button
            >
          </div>
        </div>
        <div style="display: flex">
          <div class="user-info-head" @click="editBrandInfo">
            <img
              v-if="breweryInfo.brandLogo"
              :src="breweryInfo.brandLogo"
              title="点击上传Logo"
              class="img-circle img-lg"
            />
            <div
              v-else
              class="img-circle img-lg"
              style="
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #ccc;
              "
            >
              上传Logo
            </div>
          </div>
          <div style="width: 100%">
            <div class="name">
              {{ breweryInfo.brandName }}
              <el-tag
                v-if="breweryInfo.authorized == 1"
                type="primary"
                style="margin-left: 10px"
                >已认证</el-tag
              >
              <el-tag v-else type="danger" style="margin-left: 10px"
                >未认证</el-tag
              >
            </div>
            <el-row
              :gutter="20"
              style="display: flex; width: 100%; height: 85%"
            >
              <el-col :sm="10" :lg="10">
                <!-- <div class="row">
                    <div class="label"></div>
                    
                  </div> -->
                <ul>
                  <li>品牌ID：{{ breweryInfo.brandCode }}</li>
                  <li>
                    所在地区：{{ breweryInfo.country }}-{{
                      breweryInfo.province
                    }}-{{ breweryInfo.city }}
                  </li>
                  <li>联系人：{{ breweryInfo.contactPerson }}</li>
                  <li>联系方式：{{ breweryInfo.contactPhone }}</li>
                  <li>创立时间：{{ breweryInfo.buildingDate }}</li>
                  <li>酒款产品数量： {{ breweryInfo.productCount }}</li>
                  <li style="display: flex; align-items: flex-start">
                    <span style="flex-shrink: 0">品牌方简介：</span
                    ><span>{{ breweryInfo.desc }}</span>
                  </li>
                </ul>
              </el-col>
              <!-- 屏幕宽度大于1200px时，显示分割线  -->
              <el-col :sm="1" :lg="1">
                <div style="height: 85%; border-left: 1px solid #e9e9e9"></div>
              </el-col>
              <el-col :sm="8" :lg="8">
                <ul>
                  <li>生产商名称：{{ authInfo.producer }}</li>
                  <li>主体信息：{{ authInfo.businessEntity }}</li>
                  <li>主体许可证编号：{{ authInfo.productionLicenseSn }}</li>
                  <li>负责人姓名：{{ authInfo.manager }}</li>
                  <li>负责人联系方式：{{ authInfo.managerPhone }}</li>
                  <li>客服电话：{{ authInfo.customerSupportNumber }}</li>
                </ul>
              </el-col>
              <el-col :sm="5" :lg="5">
                <ul>
                  <li
                    style="
                      display: flex;
                      align-items: flex-start;
                      flex-wrap: wrap;
                    "
                  >
                    主体许可证：<el-image
                      style="width: 100px; height: 100px"
                      :src="authInfo.productionLicense"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="[authInfo.productionLicense]"
                      :initial-index="4"
                      fit="cover"
                      title="点击查看大图"
                    />
                  </li>
                  <!-- <li style="display: flex;align-items: flex-start;">品牌授权书：<el-image
                        style="width: 100px; height: 100px"
                        :src="authInfo.authorizationUrl"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="[authInfo.authorizationUrl]"
                        :initial-index="4"
                        fit="cover"
                        title="点击查看大图"
                      /></li> -->
                </ul>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-card>
    <!-- <el-row  :gutter="10" style="height: calc(100vh - 414px)">
      <el-col :sm="12" :lg="12" style="margin-bottom: 10px">
        <el-card class="update-log" shadow="never" style="height: 100%">
          <div class="body">
            <div class="header-title">
              <span>员工管理</span>
            </div>
            <div
              style="
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
              "
            >
              <div style="width: 180px; text-align: center">
                <div style="color: #999">已有员工数</div>
                <div style="font-size: 24px; margin: 8px 0px">10</div>
                <el-button type="text" size="small">去添加</el-button>
              </div>
              <div style="width: 180px; text-align: center">
                <div style="color: #999">停用员工数</div>
                <div style="font-size: 24px; margin: 8px 0px">10</div>
                <el-button type="text" size="small">去启用</el-button>
              </div>
            </div>
            <el-divider></el-divider>
            <div>
              <div style="margin-bottom: 10px">最近员工操作</div>
              <ul style="overflow-y: auto; height: 200px; padding-right: 10px">
                <li v-for="item in 10" :key="item">
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      gap: 20px;
                    "
                  >
                    <span>张三</span>
                    <div
                      style="
                        color: #666;
                        flex: 1;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                      "
                    >
                      新增员工
                    </div>
                    <span>2021-01-01 10:00:00</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="12" :lg="12" style="margin-bottom: 10px">
        <el-card class="update-log" shadow="never" style="height: 100%">
          <div class="body">
            <div class="header-title">
              <span>联系地址</span>
            </div>

            <el-descriptions column="1" label-width="80px">
              <el-descriptions-item
                label="客服电话："
                >{{
              }}</el-descriptions-item>
              <el-descriptions-item label="联系地址："
                >{{ breweryInfo.country }}-{{ breweryInfo.province }}-{{
                  breweryInfo.city
                }}</el-descriptions-item
              >
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row> -->

    <!-- 编辑品牌信息弹窗 -->
    <el-dialog
      title="编辑品牌信息"
      v-model="editBrandVisible"
      width="600px"
      append-to-body
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form
        ref="BrandRef"
        :model="editBrandForm"
        :rules="rules"
        label-width="110px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="品牌Logo" prop="brandLogo">
              <ImageUpload
                v-model="editBrandForm.brandLogo"
                :fileSize="5"
                :limit="1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品牌首页背景图" prop="brandCover">
              <ImageUpload
                v-model="editBrandForm.brandCover"
                :fileSize="5"
                :limit="1"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="品牌方名称" prop="brandName">
          <el-input
            v-model="editBrandForm.brandName"
            placeholder="请输入品牌方名称"
          />
        </el-form-item>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="联系人" prop="contactPerson">
              <el-input
                v-model="editBrandForm.contactPerson"
                placeholder="请输入联系人"
              /> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="联系方式" prop="contactPhone">
              <el-input
                v-model="editBrandForm.contactPhone"
                placeholder="请输入联系方式"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="国家" prop="country">
              <el-input
                :model-value="editBrandForm.country"
                disabled
                placeholder="请输入国家"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="地区" prop="province">
              <el-cascader
                placeholder="请选择省市"
                :options="pcTextArr"
                v-model="selectedOptions"
                style="width: 100%"
                @change="handleChange"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="创立时间" prop="buildingDate">
          <el-date-picker
            v-model="editBrandForm.buildingDate"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="品牌方简介" prop="desc">
          <el-input
            v-model="editBrandForm.desc"
            maxlength="70"
            show-word-limit
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 品牌认证弹窗 -->
    <el-dialog
      title="认证"
      v-model="authVisible"
      width="720px"
      append-to-body
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form
        ref="authRef"
        :model="authForm"
        :rules="rules"
        label-width="140px"
      >
        <el-form-item label="生产商名称" prop="producer">
          <el-input
            v-model="authForm.producer"
            placeholder="请输入生产商名称"
          />
        </el-form-item>
        <el-form-item label="生产许可证号" prop="productionLicenseSn">
          <el-input
            v-model="authForm.productionLicenseSn"
            placeholder="请输入生产许可证号"
          />
        </el-form-item>
        <el-form-item label="主体信息" prop="businessEntity">
          <el-input
            v-model="authForm.businessEntity"
            placeholder="请输入主体信息"
          />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="许可证扫描件" prop="productionLicense">
              <ImageUpload
                v-model="authForm.productionLicense"
                :fileSize="5"
                :limit="1"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
                <el-form-item label="品牌授权书" prop="authorizationUrl">
              <ImageUpload v-model="authForm.authorizationUrl" :fileSize="5" :limit="1" />
            </el-form-item>
              </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="负责人" prop="manager">
              <el-input
                v-model="authForm.manager"
                placeholder="请输入负责人"
              /> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="负责人联系方式" prop="managerPhone">
              <el-input
                v-model="authForm.managerPhone"
                placeholder="请输入联系方式"
              /> </el-form-item
          ></el-col>
        </el-row>

        <el-form-item label="地址" prop="address">
          <el-input v-model="authForm.address" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="客服电话" prop="customerSupportNumber">
          <el-input
            v-model="authForm.customerSupportNumber"
            placeholder="请输入客服电话"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitAuthForm">确 定</el-button>
          <el-button @click="cancelAuth">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Index">
import { getBreweryInfo, updateBreweryInfo } from "@/api/brewery/breweryinfo";
import { addAuth, getAuth, updateAuth } from "@/api/brewery/auth";
import { pcTextArr } from "element-china-area-data";

import useUserStore from "@/store/modules/user";
const { proxy } = getCurrentInstance();
const userInfo = useUserStore().userInfo;
const breweryInfo = ref({}); // 品牌信息
const editBrandVisible = ref(false); // 编辑品牌信息弹窗
const editBrandForm = ref({
  brandName: "",
  contactPerson: "",
  contactPhone: "",
  province: "",
  city: "",
  buildingDate: "",
  productCount: "",
  desc: "",
});
const authVisible = ref(false); // 品牌认证弹窗
const authInfo = ref({}); // 品牌认证信息
const authForm = ref({
  producer: "",
  productionLicense: "",
  productionLicenseSn: "",
  manager: "",
  managerPhone: "",
  businessEntity: "",
  authorizationUrl: "",
  address: "",
  customerSupportNumber: "",
}); // 品牌认证表单
const rules = {
  brandLogo: [{ required: true, message: "请上传品牌Logo", trigger: "change" }],
  brandName: [
    { required: true, message: "请输入品牌方名称", trigger: "blur" },
    { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
  ],
  contactPerson: [
    { required: true, message: "请输入联系人", trigger: "blur" },
    { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
  ],
  contactPhone: [
    { required: true, message: "请输入联系方式", trigger: "blur" },
    { min: 11, max: 11, message: "请输入正确的手机号", trigger: "blur" },
  ],
  province: [
    { required: true, message: "请输入省份", trigger: "blur" },
    { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
  ],
  city: [
    { required: true, message: "请输入城市", trigger: "blur" },
    { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
  ],
  buildingDate: [
    { required: true, message: "请选择创立时间", trigger: "change" },
  ],
  productCount: [
    { required: true, message: "请输入酒款产品数量", trigger: "blur" },
  ],
  desc: [
    { required: true, message: "请输入品牌方简介", trigger: "blur" },
    { min: 1, max: 200, message: "长度在 1 到 200 个字符", trigger: "blur" },
  ],
};
const getBreweryInfoData = async () => {
  console.log(userInfo);
  const res = await getBreweryInfo(userInfo.breweryId);
  if (res.code === 200) {
    breweryInfo.value = res.data;
  }
};

onMounted(() => {
  getBreweryInfoData(); // 获取品牌信息
  getAuthData(); // 获取品牌认证信息
});
// 上传logo
const editBrandInfo = () => {
  console.log("编辑品牌信息");
  editBrandForm.value = { ...breweryInfo.value };
  editBrandVisible.value = true;
};
const submitForm = () => {
  console.log("提交表单");
  updateBreweryInfo(editBrandForm.value).then((res) => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess("编辑成功");
      editBrandVisible.value = false;
      getBreweryInfoData();
    }
  });
};
const cancel = () => {
  editBrandVisible.value = false;
};
// 品牌认证信息
async function getAuthData() {
  const res = await getAuth();
  console.log(res);
  authInfo.value = res.data || {};
}

function showBrandAuth() {
  authForm.value = { ...authInfo.value };
  authVisible.value = true;
}
// 提交认证信息
async function submitAuthForm() {
  // authForm.value.breweryId = userInfo.breweryId;
  if (authForm.value.id) {
    const res = await updateAuth(authForm.value);
    if (res.code === 200) {
      proxy.$modal.msgSuccess("更新提交成功");
      authVisible.value = false;
      getAuthData();
    } else {
      console.log("认证失败");
    }
  } else {
    const res = await addAuth(authForm.value);
    if (res.code === 200) {
      proxy.$modal.msgSuccess("提交成功");
      authVisible.value = false;
      getAuthData();
    } else {
      console.log("认证失败");
    }
  }
}
// 取消认证
const cancelAuth = () => {
  authVisible.value = false;
};

const selectedOptions = ref([]);
function handleChange() {
  console.log(selectedOptions.value);
  editBrandForm.value.province = selectedOptions.value[0];
  editBrandForm.value.city = selectedOptions.value[1];
}
</script>

<style scoped lang="scss">
ul {
  // padding: 0;
  margin: 0;
}
li {
  list-style: none;
  margin-bottom: 10px;
}
.app-container {
  padding: 20px;
  .header-title {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .name {
    font-size: 18px;
    font-weight: bold;
    margin-left: 40px;
    margin-bottom: 15px;
  }
}
.user-info-head {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px;
}

.user-info-head:hover:after {
  content: "+";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .el-divider--vertical {
  height: 85%;
}

.row {
  display: flex;
  .label {
    width: 100px;
  }
}
</style>
