<template>
  <Mask :is-show="show" :width=800 :height="800" >
    <div class="container-wrapper">
      <CloseBtn @click="close"></CloseBtn>
      <el-table :data="tableData" style="width: 100%" class="list"  highlight-current-row  @current-change="handleCurrentChange">
        <el-table-column type="index" width="50" />
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="data" label="内容" width="500">
          <template #default="scope">
            {{getContent(scope.row.data)}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="del(scope.row)">删除</el-button>
          </template>

        </el-table-column>

      </el-table>
      <el-button @click="selected" type="primary">确定</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </Mask>

</template>
<script setup lang="ts">
import Mask from "@/components/Mask.vue";
import {onMounted, ref} from "vue";
import CloseBtn from "@/components/CloseBtn.vue";
import {post} from "@/utils/request.ts";

const show = ref(false)
const open = ()=>{
  getTableData()
  show.value = true
}
const tableData = ref<any>([]);
const getTableData = () => {
  post("retail/associate/getList").then((res: any) => {
    tableData.value = res;
    tableData.value.forEach((item:any)=> {
      item.data = JSON.parse(item.data)
    } )
  })
}
const getContent = (data:any)=>{
    let str = "";
    data.forEach((item:any)=>{
      str += item.name + ":" + item.retailNumber + item.selectedUnit+" "
    })
  return str
}
const del = (row:any)=>{
  post("retail/associate/del",{id:row.id}).then((res:any)=>{
    getTableData()
  })
}
const close = ()=>{
  show.value = false
  currentRow.value = null
}
const currentRow = ref<any>(null)
const handleCurrentChange = (val:any)=>{
  currentRow.value = val
}
const emit = defineEmits(['selected'])
const selected = ()=>{
  emit("selected",currentRow.value)
  close()
}
defineExpose({open})
</script>
<style scoped lang="scss">
  .container-wrapper{
    .list{
      margin-top: 20px;
    }
  }
</style>