<template>
  <div class="page-div">
    <div class="tabs-div" :style="{ marginBottom: user == 3?'': '17px' }">
      <div class="tabs-item active-tabs-item">
        企业列表
        <div class="tabs-item-active"></div>
      </div>
    </div>
    <div style="display: flex;">
      <div style="flex: 1;">
        <div class="search-div" v-if="user == 3">
          <div style="display: flex;">
            <div class="search-label">企业名称</div>
            <a-input
              style="width: 201px;"
              class="search-input"
              v-model:value="params.name"
              placeholder="请输入企业名称" 
            />
            <div class="search-label">信用代码</div>
            <a-input
              style="width: 201px;"
              class="search-input"
              v-model:value="params.code"
              placeholder="请输入信用代码" 
            />
            <div class="search-label">企业资质</div>
            <a-input
              style="width: 201px;"
              class="search-input"
              v-model:value="params.qualification"
              placeholder="请输入企业资质" 
            />
            <a-button class="search-button search" type="primary" @click="query()">
              <template #icon>
                <div class="search-icon"></div>
              </template>
              搜索
            </a-button>
          </div>
          <a-button class="search-button add-button" type="primary" @click="openAddEnterpriseModal('insert', '')">
            <template #icon>
              <PlusOutlined />
            </template>
            添加
          </a-button>
        </div>
        <div class="content-div" :style="{ height: user == 3?'': '752px' }">
          <a-table
            :loading="loading"
            class="content-table"
            :row-selection="rowSelection"
            :columns="getShowColumns()"
            :data-source="showList"
            :pagination="false"
            :scroll="{ y: user == 3? 550: 550 }"
          >
            <template #bodyCell="{ column, text, record }">
              <template v-if="
                column.dataIndex === 'license' ||
                (column.dataIndex === 'phone' && user !== 3)
              ">
                <div class="blue-span">{{ text }}</div>
              </template>
              <template v-if="column.dataIndex === 'accountState'">
                <div :class="`status-cell ${text == 0? 'success-status': 'error-status'}`">
                  <div class="status-icon"></div>
                  {{ text == 0? '正常': '停用' }}
                </div>
              </template>
              <template v-if="column.dataIndex === 'operate'">
                <a-dropdown overlayClassName="operate-dropdown" placement="bottom" :arrow="{ pointAtCenter: true }">
                  <template #overlay>
                    <a-menu @click="operateClick">
                      <a-menu-item key="1" :disabled="record.isReview" @click="openAddEnterpriseModal('update',record)">修改</a-menu-item>
                      <a-menu-item key="2" :disabled="record.isReview" @click="review(record)" v-if="user == 3">审核</a-menu-item>
                      <a-menu-item key="4" v-if="user == 3" @click="accountManage(record)">账号管理</a-menu-item>
                    </a-menu>
                  </template>
                  <a-button class="operate-button" type="primary">
                    操作
                    <DownOutlined />
                  </a-button>
                </a-dropdown>
              </template>
            </template>
          </a-table>
          <div class="pagination-div">
            <a-pagination 
              v-model:current="page"
              v-model:pageSize="limit"
              show-quick-jumper
              :total="total"
              @change="paginationChange"
              :show-total="total => `共 ${total} 条数据`"
            />
          </div>
        </div>
      </div>
      <div v-if="user == 3" style="width: 466px;margin-left: 22px;">
        <div class="search-div" style="justify-content: end;">
          <a-button style="width: 93px;margin-right: 10px;" class="search-button" type="primary" >
            <template #icon>
              <PlusOutlined />
            </template>
            添加
          </a-button>
          <a-button style="width: 93px;" class="search-button" type="primary" >
            操作
          </a-button>
        </div>
        <div class="content-div right-content">
          <div class="right-content-title">
            <div class="title-icon"></div>
            <div class="title-span">企业信息</div>
          </div>
          <div class="interval"></div>
          <div class="from-item" style="margin-bottom: 20px;">
            <div class="from-title">标题</div>
            <div class="from-content">
              <a-input class="from-input"
                v-model:value="fromValue.title"
                placeholder="请输入公告标题"
              />
            </div>
          </div>
          <div class="from-item" style="margin-bottom: 20px;">
            <div class="from-title">时间</div>
            <div class="from-content">
              <a-date-picker
                class="from-date-picker"
                v-model:value="fromValue.time"
                placeholder="请选择日期时间"
              />
            </div>
          </div>
          <div class="from-item" style="margin-bottom: 20px;">
            <div class="from-title">正文内容</div>
            <div class="from-content">
              <a-textarea
                class="from-textarea"
                v-model:value="fromValue.content"
                placeholder="请编写相关招标内容"
                :rows="4"
              />
            </div>
          </div>
          <div class="right-button-div">
            <a-button class="edit-button">编辑</a-button>
            <a-button class="save-button" type="primary">发布</a-button>
          </div>
        </div>
      </div>
    </div>
    <a-modal width="775px" v-model:open="insertModalOpen" :footer="null" :closable="false" :destroyOnClose="true" :maskClosable="false" :keyboard="false">
      <InsertModal
        :modalType="modalType"
        :info="showInfo"
        @changeAddModal="changeAddModal"
        @query="query"
      />
    </a-modal>
    <a-modal width="775px" v-model:open="accountManageModal" :footer="null" :closable="false" :destroyOnClose="true" :maskClosable="false" :keyboard="false">
      <AccountManage
        :info="enterpriseInfo"
        @changeManageModal="changeManageModal"
        @query="query"
      />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { yearOptions, proxyColumns, supplierColumns, proprietorColumns, data } from './util'
import { SearchOutlined, PlusOutlined, DownOutlined } from '@ant-design/icons-vue'
import { LoadBidCompanyInfo, ReviewBidCompanyInfo } from '@/api/demo/enterprise'
import { getUserType } from '@/views/demo/util'
import InsertModal from './InsertModal/index.vue'
import AccountManage from './AccountManage/index.vue'
import { message } from "ant-design-vue"

onMounted(() => {
  query()
})
const user = ref(getUserType())
const params = ref({
  name: null,
  code: null,
  qualification: null,
})
const fromValue = ref({
  title:'',
  time: '',
  content: '',
})
const showList = ref([])
const page = ref(1)
const limit = ref(10)
const total = ref(0)
const loading = ref(false)
const insertModalOpen = ref(false)
const accountManageModal = ref(false)
const modalType = ref('')
const showInfo = ref({})
const enterpriseInfo = ref({})

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};
const paginationChange = (a,b) => {
  console.log(a,b)
  query()
}
const getShowColumns = () => {
  switch(user.value){
    case 1: 
      return proxyColumns
    case 2:
      return supplierColumns
    case 3:
      return proprietorColumns
  }
}
const operateClick = (a,b,c) => {
  console.log(a,b,c)
}
const query = () => {
  let requestParams = {
    ...params.value,
    page: page.value,
    limit: limit.value,
  }
  loading.value = true
  LoadBidCompanyInfo(requestParams, user.value).then(res => {
    total.value = res.total
    showList.value = res.items
  }).finally(() => {
    loading.value =  false
  })
}
const changeAddModal = (type) => {
  insertModalOpen.value = type
}
const changeManageModal = (type) => {
  accountManageModal.value = type
}
const openAddEnterpriseModal = (type, item) => {
  modalType.value = type
  if(type == 'update'){
    showInfo.value = item
  }
  changeAddModal(true)
}
const review = (record) => {
  ReviewBidCompanyInfo(record.id).then(res => {
    message.success('企业信息审核成功')
    query()
  })
}
const accountManage = (record) => {
  enterpriseInfo.value = record
  accountManageModal.value = true
}
</script>

<style lang="scss" scoped>
.page-div{
  padding: 17px 38px 26px 38px;
  background: #F5F5FA;
  .tabs-div{
    height: 82px;
    background: #FFFFFF;
    box-shadow: 0px 5px 10px 0px rgba(241,242,250,0.5);
    border-radius: 6px;
    padding-top: 25px;
    padding-left: 57px;
    display: flex;
    margin-bottom: 37px;
    .tabs-item{
      width: 94px;
      height: 56px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 22px;
      color: #1C1C1C;
      line-height: 34px;
      margin-right: 66px;
      opacity: 0.6;
      cursor: pointer;
      .tabs-item-active{
        margin-top: 17px;
        width: 100%;
        height: 6px;
        background: #0081FF;
        border-radius: 5px 5px 0px 0px;
      }
    }
    .active-tabs-item{
      opacity: 1;
    }
    
  }
  .search-div{
    display: flex;
    justify-content: space-between;
    margin-bottom: 27px;
    .search-select{
      margin-right: 12px;
      :deep(.ant-select-selector){
        height: 40px;
      }
      :deep(.ant-select-selection-item){
        display: flex;
        align-items: center;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 13px;
        color: #000000;
        line-height: 20px;
      }
      :deep(.ant-select-selection-placeholder){
        display: flex;
        align-items: center;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 13px;
        color: #000000;
        line-height: 20px;
      }
      .search-select-suffixIcon{
        width: 10px;
        height: 6px;
        background-image: url('/public/tender/search_select_icon.png');
        background-size: 100% 100%;
      }
    }
    .search-input{
      margin-right: 12px;
    }
    .search-button{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      background: #0081FF;
      border-radius: 5px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 21px;
      cursor: pointer;
      user-select: none;
      .search-icon{
        width: 14px;
        height: 14px;
        background-image: url('/public/tender/search_icon.png');
        background-size: 100% 100%;
        margin-right: 7px;
      }
    }
    .search-label{
      display: flex;
      align-items: center;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 13px;
      color: #000000;
      line-height: 20px;
      margin-right: 20px;
    }
    .search{
      width: 82px;
    }
    .add-button{
      width: 116px;
    }
    .search-year{
      width: 111px;
    }
    .search-name{
      width: 142px;
    }
    .search-type{
      width: 142px;
    }
  }
  .content-div{
    height: 685px;
    background-color: #FFFFFF;
    box-shadow: 0px 5px 10px 0px rgba(241,242,250,0.5);
    border-radius: 6px;
    padding: 20px;
    .content-table{
      height: calc(100% - 40px);
      margin-bottom: 10px;
      .blue-span{
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #0081FF;
        line-height: 20px;
        cursor: pointer;
      }
      .status-cell{
        display: flex;
        align-items: center;
        .status-icon{
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin-right: 11px;
        }
      }
      .success-status{
        .status-icon{
          background: #04CE3C;
        }
      }
      .error-status{
        color: rgba(0, 0, 0, 0.3);
        .status-icon{
          background: #CE0404;
        }
      }
      .operate-button{
        width: 70px;
        height: 30px;
        background: #0081FF;
        border-radius: 4px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #FBFBFB;
        line-height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        :deep(.anticon){
          margin-inline-start: 3px;
        }
      }
      :deep(.ant-table-body){
        .ant-table-cell{
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 14px;
          color: #000000;
          line-height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      :deep(.ant-table-header){
        .ant-table-cell{
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 14px;
          color: #5A607F;
          line-height: 20px;
        }
        .ant-table-cell::before{
          display: none;
        }
      }
      :deep(.ant-checkbox-checked){
        .ant-checkbox-inner{
          background-color: #0081FF;
          border-color: #0081FF;
        }
      }
    }
    .pagination-div{
      display: flex;
      justify-content: end;
    }
  }
  .right-content{
    padding: 19px 24px 31px 25px;
    .right-content-title{
      display: flex;
      height: 24px;
      align-items: center;
      margin-bottom: 25px;
      .title-icon{
        width: 24px;
        height: 24px;
        background-image: url('/public/enterpriselist/enterpriselist_right_icon.png');
        background-size: 100% 100%;
        margin-right: 10px;
      }
      .title-span{
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 14px;
        color: #5A607F;
        line-height: 20px;
      }
    }
    .interval{
      height: 1px;
      background: #E6E9F4;
      margin-left: -25px;
      margin-right: -24px;
      margin-bottom: 19px;
    }
    .from-item{
      .from-title{
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 13px;
        color: #000000;
        line-height: 20px;
        margin-bottom: 7px;
      }
      .from-content{
        .from-input{
          height: 40px;
          background: #FFFFFF;
          border-radius: 6px;
          border: 1px solid #A9BBD8;
        }
        .from-date-picker{
          width: 100%;
          height: 40px;
          border-radius: 6px;
          border: 1px solid #A9BBD8;
        }
        .from-textarea{
          height: 316px;
          background: #FFFFFF;
          border-radius: 6px;
          border: 1px solid #A9BBD8;
        }
      }
    }
    .right-button-div{
      display: flex;
      justify-content: end;
      .edit-button{
        width: 93px;
        height: 40px;
        border-radius: 6px;
        border: 1px solid #0081FF;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        font-size: 14px;
        color: #0081FF;
        line-height: 21px;
        margin-right: 10px;
      }
      .save-button{
        width: 93px;
        height: 40px;
        background: #0081FF;
        border-radius: 6px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 21px;
      }
    }
  }
}
</style>
<style lang="scss">
.operate-dropdown{
  .ant-dropdown-menu-item:hover{
    font-weight: 500;
    color: #1E5EFF;
    background-color: #ECF2FF !important;
  }
}
</style>
