<template>
  <div class="page-div">
    <div class="tabs-div">
      <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="content-div">
          <a-table
            :loading="loading"
            class="content-table"
            :row-selection="rowSelection"
            :columns="columns"
            :data-source="showList"
            :pagination="false"
            :scroll="{ y: 617 }"
          >
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.dataIndex === 'businesslicense' || column.dataIndex === 'usernumber'
              ">
                <div class="blue-span">{{ text }}</div>
              </template>
              <template v-if="column.dataIndex === 'status'">
                <div class="status-cell">
                  <div class="status-icon"></div>
                  {{ text }}
                </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" @click="openAddEnterpriseModal('update',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>
    <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>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { yearOptions, columns } from './util'
import { SearchOutlined, PlusOutlined, DownOutlined } from '@ant-design/icons-vue'
import { LoadBiddingAgencyByUser } from '@/api/demo/enterprise'
import InsertModal from '@/views/demo/enterpriselist/InsertModal/index.vue'

onMounted(() => {
  query()
})
const showList = ref([])
const loading = ref(false)
const page = ref(1)
const limit = ref(10)
const total = ref(0)
const insertModalOpen = ref(false)
const modalType = ref('')
const showInfo = 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 operateClick = (a,b,c) => {
  console.log(a,b,c)
}
const query = () => {
  let params = {
    page: page.value,
    limit: limit.value
  }
  loading.value = true
  LoadBiddingAgencyByUser(params).then(res => {
    total.value = res.total
    showList.value = res.items
  }).finally(() => {
    loading.value = false
  })
}
const changeAddModal = (type) => {
  insertModalOpen.value = type
}
const openAddEnterpriseModal = (type, item) => {
  modalType.value = type
  if(type == 'update'){
    showInfo.value = item
  }
  changeAddModal(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: 17px;
    .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{
      width: 82px;
    }
    .add-button{
      width: 116px;
    }
    .search-year{
      width: 111px;
    }
    .search-name{
      width: 142px;
    }
    .search-type{
      width: 142px;
    }
  }
  .content-div{
    height: 752px;
    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;
          background: #0081FF;
          border-radius: 50%;
          margin-right: 11px;
        }
      }
      .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/tender/right_content_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>
