<template>
  <div class="bg-white dark:!bg-[#060818]">
    <el-tabs type="border-card" class="bg-gray-100 dark:bg-[#060818]">
      <el-tab-pane label="公司信息" class="custom-tab-pane">
        <el-form :model="companyForm" :rules="stockRules" ref="companyFormRef" label-width="140px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="当前套餐:" prop="company_package_id">
                <el-select v-model="companyForm.company_package_id" clearable placeholder="请选择套餐">
                  <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- user_num -->
            <el-col :span="5">
              <el-form-item label="套餐到期时间:" prop="name">
                {{ companyForm.end_use_time }}
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="可绑定账户数:" prop="name">
                {{ companyForm.user_num }}
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="公司名称:" prop="name">
                <el-input v-model="companyForm.name" :minlength="2" :maxlength="20" clearable placeholder="请输入公司名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="统一社会信用代码:" prop="credit_code">
                <el-input v-model="companyForm.credit_code" :minlength="2" :maxlength="20" clearable placeholder="请输入统一社会信用代码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="行业:" prop="industry">
                <el-input v-model="companyForm.industry" :minlength="2" :maxlength="20" clearable placeholder="请输入行业"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="联系人:" prop="user_name">
                <el-input v-model="companyForm.user_name" :minlength="2" :maxlength="20" clearable placeholder="请输入联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="联系人电话:" prop="phone">
                <el-input v-model="companyForm.phone" :minlength="2" :maxlength="20" clearable placeholder="请输入联系人电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="邮箱:" prop="email">
                <el-input v-model="companyForm.email" :minlength="2" :maxlength="20" clearable placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="邮编:" prop="postal_code">
                <el-input v-model="companyForm.postal_code" :minlength="2" :maxlength="20" clearable placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item label="官网:" prop="website">
                <el-input v-model="companyForm.website" :minlength="2" :maxlength="20" clearable placeholder="请输入官网地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="地址:" prop="">
                <el-cascader class="w-full" size="default" :options="options" clearable v-model="selectedOptions"> </el-cascader>
                <span>
                  <el-input class="!w-full mt-3" v-model="companyForm.address" placeholder="请输入"></el-input>
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="营业执照:" prop="license">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="companyForm.license" :src="companyForm.license" class="avatar w-28 h-28" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="flex justify-center"><el-button type="primary" @click="submitWarehouseForm">保 存</el-button></div>
      </el-tab-pane>
      <el-tab-pane label="个人信息" class="custom-tab-pane">
        <el-form :model="infoForm" :rules="stockRules" ref="infoFormRef" label-width="140px">
          <el-row>
            <el-col :span="16">
              <el-form-item label="名称:" prop="nickname">
                {{ infoForm.nickname }}
                <!-- <el-input v-model="infoForm.nickname" :minlength="2" disabled :maxlength="20" clearable placeholder="请输入公司名称"></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="登录昵称:" prop="username">
                {{ infoForm.username }}
                <!--  <el-input v-model="infoForm.username" :minlength="2" disabled :maxlength="20" clearable placeholder="请输入统一社会信用代码"></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="手机号:" prop="phone">
                {{ infoForm.phone }}
                <!--  <el-input v-model="infoForm.phone" :minlength="2" disabled :maxlength="20" clearable placeholder="请输入联系人电话"></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="邮箱:" prop="email">
                {{ infoForm.email }}
                <!--  <el-input v-model="infoForm.email" :minlength="2" disabled :maxlength="20" clearable placeholder="请输入邮箱"></el-input> -->
              </el-form-item>
            </el-col>
            <!--  <el-col :span="16">
              <el-form-item label="部门:" prop="dept_id">
                {{ infoForm.dept_id }}
              </el-form-item>
            </el-col> -->
            <el-col :span="16">
              <el-form-item label="头像:" prop="face">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="handleInfoSuccess"
                  :before-upload="beforeInfoUpload"
                >
                  <img v-if="infoForm.face" :src="infoForm.face" class="avatar w-28 h-28" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="flex justify-center"><el-button type="primary" @click="submitInfo">保 存</el-button></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as API_Company from '@/api/company';
import * as API_Package from '@/api/package';
import * as API_Auth from '@/api/auth';
import { provinceAndCityData, pcTextArr, regionData, pcaTextArr, codeToText } from 'element-china-area-data';
import { ElMessageBox, FormInstance, ElMessage } from 'element-plus';
import type { UploadProps } from 'element-plus';
import { useStore } from 'vuex';
import { submit } from '@/api/goodsInventoryLoss';
const store = useStore();
const tableData = ref<any>({});

const uploadUrl = ref(import.meta.env.VITE_API_URL + '/uploaders');
const companyForm = ref<any>({
  role_id: '',
  name: '',
  money: '',
  day: '',
  use_able: false,
  remark: '',
  address: '',
  license: '',
  company_package_id: '',
});
const stockRules = ref();
const options = ref<any[]>(regionData);
const selectedOptions = ref<any[]>([]);
const loading = ref(false);

const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  console.log(response, uploadFile);
  companyForm.value.license = response.url; //URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('Avatar picture size can not exceed 10MB!');
    return false;
  }
  return true;
};
/* 个人信息详情 */
const handleInfoSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  infoForm.value.face = response.url; //URL.createObjectURL(uploadFile.raw!);
};

const beforeInfoUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('Avatar picture size can not exceed 10MB!');
    return false;
  }
  return true;
};
const adminName = (val: string[]) => {
  let text = '';
  console.log(val);
  if (val !== undefined) {
    text += codeToText[val[0]];
    text += codeToText[val[1]];
    text += codeToText[val[2]];
  }
  return text;
};
const companyFormRef = ref();
const submitWarehouseForm = () => {
  companyFormRef.value.validate((valid: boolean) => {
    if (valid) {
      const params = { ...companyForm.value };
      params.province = selectedOptions.value.join(',');
      API_Company.editCompany(companyForm.value.id, params).then(() => {
        ElMessage.success('修改成功！');
        GET_CompanyList();
      });
    } else {
      ElMessage.error('表单填写有误，请核对！');
      /*    store.dispatch('showMessage', { message: '表单填写有误，请核对！', type: 'error' }); */
      return false;
    }
  });
};

const GET_CompanyList = () => {
  loading.value = true;
  API_Company.getOne('1811346086001057794')
    .then((response) => {
      loading.value = false;
      selectedOptions.value = response.province.split(',');
      /*  response.records.map((el: any) => {
        if (el.province !== undefined) {
          el.license = el.license.replace('blob:', '');
          el.province = el.province.split(',');
        }
        return el;
      }); */
      companyForm.value = response;
      console.log(companyForm.value);
    })
    .catch(() => {
      loading.value = false;
    });
};
const packageList = ref<any>([]);
const GET_PackageList = () => {
  API_Package.packageList({ page_no: 1, page_size: 1000, use_able: true }).then((res) => {
    packageList.value = res.records;
  });
};
/* 获取当前登录人详情 */
const infoForm = ref<any>({
  face: '',
});
let imgUrl = ref<any>('');
const GET_Info = () => {
  API_Auth.getAdministratorDetail(store.state.user.user.uid).then((res) => {
    infoForm.value = res;
    imgUrl.value = res.face;
  });
};
const submitInfo = () => {
  if (infoForm.value.face == undefined) {
    return ElMessage.error('请上传头像！');
  } else if (infoForm.value.face == imgUrl.value) {
    return ElMessage.error('请上传新的头像！');
  }
  API_Auth.editAdministrator(store.state.user.user.uid, { face: infoForm.value.face }).then((res) => {
    ElMessage.success('修改成功！');
    GET_Info();
  });
};

onMounted(() => {
  GET_CompanyList();
  GET_PackageList();
  GET_Info();
});
</script>
  
  <style scoped >
.container {
  background-color: #fff;
  padding: 10px;
  position: relative;
}

.site-tag {
  margin: 0 3px;
}

.site-new-tag-input {
  width: 100px;
}

:deep(.site-logo .el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  /* &:hover {
    border-color: #409eff;
  } */
}

.logo-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.site-logo-img {
  width: 120px;
  height: 120px;
  display: block;
}

.image-pane .el-input-group {
  width: 200px;
}

.point-pane .el-input-group {
  width: 200px;
}
.custom-tabs {
  @apply dark:bg-[#060818];
}

:deep(.el-tabs__header) {
  @apply dark:bg-[#060818];
}

:deep(.custom-tab-pane) {
  @apply dark:bg-[#060818];
}
:deep(.el-tabs__item.is-active) {
  @apply dark:bg-[#060818]; /* 替换为你想要的 Tailwind CSS 背景色类 */
}
</style>