<template>
  <el-container>
    <el-aside width="190px">
      <el-table :height="tableHeight + 20" :data="muBanData.slice((muBanCurrentPage - 1) * muBanPageSize, muBanCurrentPage * muBanPageSize)">
        <el-table-column label="模板名称" prop="name" width="120px">
          <!-- 店家激发弹出框 -->
          <template #default="scope">
            <el-popover placement="right" trigger="click" :width="600">
              <template #reference>
                <el-button type="text" @click="getMuBanXinXiClick(scope.row)">{{ scope.row.name }}</el-button>
              </template>
              <!-- 这里是弹出框中的数据 -->
              <el-table :height="tableHeight" :data="muBanXiangQing" @selection-change="xuanZeXiangMuTable" class="eltable">
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="项目名称" prop="chargeName"></el-table-column>
                <el-table-column label="单价" prop="chargeAmount"></el-table-column>
                <el-table-column label="数量" prop="amount"></el-table-column>
                <el-table-column label="金额">
                  <template #default="scope">
                    {{ (scope.row.chargeAmount * scope.row.amount).toFixed(2) }}
                  </template>
                </el-table-column>
                <el-table-column label="编码" prop="chargeCodeMx"></el-table-column>
              </el-table>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column>
          <template #default="scope">
            <el-popconfirm
              confirm-button-text="确认"
              cancel-button-text="取消"
              icon="el-icon-info"
              iconColor="red"
              title="是否删除该数据"
              @confirm="shanChuMuBanClick(scope.$index, scope.row)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="muBanHandleCurrentChange"
        :current-page="muBanCurrentPage"
        :page-size="muBanPageSize"
        layout=" prev, pager, next"
        :total="muBanData.length"
        style="margin-top: 5px"
        :pager-count="5"
        small
      ></el-pagination>
    </el-aside>
  </el-container>
</template>

<script>
import { onMounted, ref } from 'vue'
import { getMuBanXinXi, shanChuMuBan, getMuBan } from '@/api/yibao/xiang-mu-lu-ru'
import store from '@/store'
import { ElMessageBox } from 'element-plus'
export default {
  setup(props, ctx) {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 170

    // 项目录入模板数据
    const muBanData = ref([])
    const muBanCurrentPage = ref(1)
    const muBanPageSize = ref(10)

    const muBanHandleCurrentChange = (val) => {
      muBanCurrentPage.value = val
    }

    // 获取模板信息
    const getMuBanXinXiClick = (row) => {
      getMuBanXinXi(row.name, row.opIdCode).then((res) => {
        muBanXiangQing.value = res
      })
    }

    // 获取模板的详情
    const muBanXiangQing = ref([])

    // 获取选择的数据
    const xuanZeXiangMuTable = (val) => {
      ctx.emit('selectionFeiYong', { val })
    }

    const shanChuMuBanClick = (index, data) => {
      if (data.opIdCode !== store.state.user.info.code) {
        ElMessageBox.confirm('该模板非本人创建是否强制删除', '提示', {
          type: 'error',
        })
          .then(() => {
            shanChuMuBan(data.name, data.opIdCode).then((res) => {
              muBanData.value.splice(index, 1)
            })
          })
          .catch(() => {})
      } else {
        shanChuMuBan(data.name, data.opIdCode).then((res) => {
          muBanData.value.splice(index, 1)
        })
      }
    }

    onMounted(() => {
      getMuBan(store.state.user.info.deptCode).then((res) => {
        muBanData.value = res
      })
    })

    return {
      tableHeight,
      muBanData,
      muBanCurrentPage,
      muBanPageSize,
      muBanHandleCurrentChange,
      getMuBanXinXiClick,
      xuanZeXiangMuTable,
      muBanXiangQing,
      shanChuMuBanClick,
    }
  },
}
</script>

<style></style>
