<template>
  <d2-container v-loading="isLoading">
    <div>
      <div class="providerOrderList-container">
        <div class="d-f-j"
             style="background: #f2f3f5">
          <div>
            <div class="name">基本信息</div>
          </div>
          <div class="name modify"
               @click="basicModiy()">修改</div>
        </div>
      </div>
      <div class="df"
           style="margin-top: 20px">
        <div class="df left">
          <div>商家名称：</div>
          <div>{{ datas.companyName }}</div>
        </div>
        <div class="df right"
             style="margin-left: 170px">
          <div>社会代码：</div>
          <div>{{ datas.companyCode }}</div>
        </div>
      </div>

      <div class="df">
        <div class="df left">
          <div>商家类型：</div>
          <div>{{ datas.businessTypeValue }}</div>
        </div>
        <div class="df right"
             style="margin-left: 170px">
          <div>商家性质：</div>
          <div>{{ datas.natureValue }}</div>
        </div>
      </div>

      <div class="df">
        <div class="df left">
          <div>登录账号：</div>
          <div>{{ datas.loginName }}</div>
        </div>
        <div class="df right"
             style="margin-left: 170px">
          <div>账号状态：</div>
          <div>{{ datas.statusValue }}</div>
        </div>
      </div>
      <div class="df">
        <div class="df left">
          <div>创建时间：</div>
          <div>{{ datas.createTime }}</div>
        </div>
        <div class="df right"
             style="margin-left: 170px">
          <div>有效日期：</div>
          <div>{{ datas.validUntil }}</div>
        </div>
      </div>
      <div class="df">
        <div class="df left">
          <div>营业执照：</div>
          <div style="text-decoration: underline;cursor: pointer; color: #6767ff;"
               @click="lookImage('license')">点击查看</div>
        </div>
        <div class="df right"
             style="margin-left: 170px">
          <div>商家Logo：</div>
          <div style="text-decoration: underline;cursor: pointer; color: #6767ff;"
               @click="lookImage('logo')">点击查看</div>
        </div>
      </div>

      <div class="providerOrderList-container"
           style="margin-top: 20px">
        <div class="d-f-j"
             style="background: #f2f3f5">
          <div style=""
               class="d-f-j">
            <div class="name">联系信息</div>
          </div>
          <div class="name modify"
               @click="contactModiy()">修改</div>
        </div>
      </div>

      <div class="df"
           style="margin-top: 20px">
        <div class="df left">
          <div>联系人：</div>
          <div>{{ datas.contactName }}</div>
        </div>
        <div class="df right"
             style="margin-left: 170px">
          <div>联系电话：</div>
          <div>{{ datas.contactPhone }}</div>
        </div>
      </div>

      <div class="df">
        <div class="df left">
          <div>联系邮箱：</div>
          <div>{{ datas.email }}</div>
          <!-- <div>zhangye_text_03@sonnhe.commm</div> -->
        </div>
        <div class="df right"
             style="margin-left: 170px">
          <div>营业时间：</div>
          <div>{{ datas.businessHours }}</div>
        </div>
      </div>

      <div class="df">
        <div class="df left"
             style="width: 700px">
          <div>详细地址：</div>
          <div>{{ datas.companyAddr }}</div>
        </div>
        <!-- <div class="df right"
             style="margin-left:170px">
          <div>详细地址：</div>
          <div>{{datas.addrDetail}} </div>
        </div> -->
      </div>

      <div class="providerOrderList-container"
           style="margin-top: 20px">
        <div class="d-f-j"
             style="background: #f2f3f5">
          <div style=""
               class="d-f-j">
            <div class="name">收款信息</div>
          </div>
          <div class="name modify"
               @click="chargeModiy()">修改</div>
        </div>
      </div>

      <div class="df"
           style="margin-top: 10px">
        <div class="df left">
          <div>支付费率：</div>
          <div>{{ datas.payRate }}%</div>
        </div>
        <div class="df right"
             style="margin-left: 170px">
          <div>服务费率：</div>
          <div>{{ datas.serviceRate }}%</div>
        </div>
      </div>
      <div class="df"
           style="margin-top: 10px">
        <div class="df left">
          <div>微信商户号：</div>
          <div>{{ datas.merchantId }}</div>
        </div>
        <div class="df right"
             style="margin-left: 170px">
          <div>商户号名称：</div>
          <div>{{ datas.merchantName }}</div>
        </div>
      </div>
    </div>
    <span slot="footer"
          class="dialog-footer">
      <el-button type="primary"
                 @click="lookIntroduce()">商家介绍</el-button>
      <el-button @click="resetting()"
                 style="margin-left: 150px">重置密码</el-button>

    </span>
    <lookImage :isShowImg='isShowImage'
               :initContenta='img'
               @noShowImg='noShowImg'></lookImage>
    <modifyPws :isModifyPassword='isModifyPassword'
               @modifyPsw='modifyPsw'
               @noModify='noModify'></modifyPws>
  </d2-container>
</template>

<script>
import { getBusiness, modifyPws } from "@/libs/common/constant";
export default {
  data() {
    return {
      isLoading: false,
      datas: {},
      isShow: true,
      lunchTime: "",
      dinnerTime: "",
      imge: "",

      openId: this.$route.params.id,
      isShowImage: false,
      img: "",

      isModifyPassword: false,
    };
  },
  async created() {
    await this.getData();
  },
  methods: {
    async getData() {
      this.isLoading = true;
      await this.getBusiness(this.openId);
    },
    async getBusiness(openId) {
      const res = await this.$api.GET(`${getBusiness.url}${openId}`);
      this.datas = { ...res.info, ...res.company };
      this.datas.loginName = res.company.userList[0].loginName;
      for (var i = 0; i < res.logoImageList.length; i++) {
        if (res.logoImageList[i].type == 3) {
          this.datas.logImage = res.logoImageList[i].url;
        }
      }
      for (var z = 0; z < res.businessLicenseImageList.length; z++) {
        if (res.businessLicenseImageList[z].type == 1) {
          this.datas.businessImage = res.businessLicenseImageList[z].url;
        }
      }
      this.isLoading = false;
      console.log(res, "11");
    },
    lookImage(type) {
      console.log(type);
      if (type == "logo") {
        this.img = this.datas.logImage;
        // 这是logo
      } else if (type == "license") {
        // 这是营业执照
        this.img = this.datas.businessImage;
      }
      this.isShowImage = true;
    },
    noShowImg() {
      this.isShowImage = false;
    },
    async modifyPsw(data) {
      const pages = {
        loginName: this.datas.loginName,
        supplierOpenId: this.openId,
        loginPwd: data.password,
      };
      const res = await this.$api.POST(`${modifyPws.url}`, pages);
      console.log(res, "修改结果");
      this.isModifyPassword = false;
    },
    async noModify() {
      this.isModifyPassword = false;
    },
    // 设置基本信息
    basicModiy() {
      this.$router.push({
        path: `/basicModiy/${this.openId}`,
      });
    },

    // 联系信息设置
    contactModiy() {
      this.$router.push({
        path: `/contactModiy/${this.openId}`,
      });
    },
    // 收款信息 设置
    chargeModiy() {
      this.$router.push({
        path: `/chargeModiy/${this.openId}`,
      });
    },

    // 商家介绍
    lookIntroduce() {
      this.$router.push({
        path: `/businessIntroduce/${this.openId}`,
      });
    },
    // 重置密码
    resetting() {
      this.isModifyPassword = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.d-f-j {
  display: flex;
  justify-content: space-between;
}
.df {
  display: flex;
}
.name {
  height: 50px;
  line-height: 50px;
  margin-left: 10px;
}
.modify {
  margin-right: 20px;
  color: blue;
  cursor: pointer;
}
.button {
  margin-top: 20px;
  margin-right: 10px;
}
.left {
  width: 400px;
  line-height: 40px;
  margin-left: 30px;
}
.right {
  line-height: 40px;
  margin-right: 30px;
}
</style>
