<template>
  <div class="goods">
    <el-card class="boxcard" shadow="never">
      <r-search ref="searchalt" :searchData="searchData" :searchForm="searchForm" :searchHandle="searchHandle"  />
    </el-card>
    
    <div :style="{height:`${this.contentHeight}px`}" style="padding-top:30px;">
        <r-table class="page" :isIndex="false" isHandle :tableData="tableData" :tableCols="tableCols" :tableHandles="tableHandles"  :isPagination="true" :tablePage="pagination" @refresh="init()" />
      
    </div>
    <r-form
      :isHandle="true"
      :formRules="formRules"
      :formCols="formCols"
      :formHandle="formHandle"
      :formData="formData"
			labelWidth="100px"
      dialogWidth="550px"
      :inline="false"
      ref="elForm"
    />
  </div>
</template>
<script>

export default {
    data() {
        return {
          load:false,
          flag:false,
          title:'',
          param:{},
          supplierType:[],
          pagination: { size: 10, page: 1, total: 0 },
          searchData: {
            keyWord:"",
            status:'-1'
          },
          searchForm: [
            { type: "input",label: "关键词", prop: "keyWord",placeholder:'供应商名称'},
            { type: "select",label: "状态", prop: "status",options:[{label:'禁用',value:'0'},{label:'正常',value:'1'},{label:'全部',value:'-1'}]}
          ],
          searchHandle: [
            {type: "info",icon: "el-icon-refresh", handle: e => this.init(true) },
            {label: "搜索",type: "primary",icon: "el-icon-search",handle: e => this.seach()},  
          ],
          
          tableData: [],
          tableCols:[
            { label: "供应商名称", prop: "supplier_name",width:200},
            { label: "所在类别", prop: "supplier_type",width:150},
            { label: "拥有品类", prop: "type_name",width:200},
            { label: "对公银行", prop: "bank",width:150},
            { label: "对公账号", prop: "bank_num",width:200},
            { label: "联系人", prop: "username",width:150},
            { label: "手机号码", prop: "phone",width:150},
            { label: "公司座机", prop: "tel",width:150},
            { label: "微信号码", prop: "wx",width:150},
            { label: "公司地址", prop: "address",width:200},
            { label: "地址邮编", prop: "code",width:150},
            { label: "状态", prop: "status",formatter:e=>e.status==1?'正常':'禁用'},
            { label: "备注", prop: "remark",width:250},
            { label: "创建时间", prop: "created_at",width:200},
            { label: "操作",type: "button",width: 300,
              btnList: [
                {label: "修改",type: "primary",size: "mini",handle: (row) => this.elFormChange(row)},
                {label: "删除",type: "danger",size: "mini",handle: (row) => this.elFormDelete(row)},
              ]
            },
          ],
          
          tableHandles: [
            {
              label: "新增供应商",
              type: "primary",
              handle: e => {this.elFormVisible(e)} ,
            },
          ],
          // pagination: { limit: 10, offset: 1, total: 1 },
          formData: {
            supplier_name: "",
            type_id:'',
            good_type_id:'',
            bank:"",
            bank_num:"",
            username:"",
            phone:"",
            tel:"",
            wx:"",
            address:"",
            code:"",
            status:1,
            remark:''
          },
          formCols: [
            {type: "input", label: "供应商名称", prop: "supplier_name",width:350},
            {type: "select", label: "所在类别", prop: "type_id",width:350,options:[]},
            {type: "select", label: "品类", prop: "good_type_id",width:350,options:[]},
            {type: "input", label: "对公银行", prop: "bank",width:350},
            {type: "input", label: "对公账号", prop: "bank_num",width:350},
            {type: "input", label: "联系人", prop: "username",width:350},
            {type: "input", label: "手机号码", prop: "phone",width:350},
            {type: "input", label: "公司座机", prop: "tel",width:350},
            {type: "input", label: "微信号码", prop: "wx",width:350},
            {type: "input", label: "公司地址", prop: "address",width:350},
            {type: "input", label: "公司邮编", prop: "code",width:350},
            {type: "select", label: "状态", prop: "status",width:350,options:[{label:'正常',value:1},{label:'禁用',value:0}]},
            {type: "textarea", label: "备注", prop: "remark",width:350},
          ],
          formRules: {
            supplier_name: [{ required: true, message: "请输入供应商名称", trigger: "blur" }],
            type_id: [{ required: true, message: "请选择所在类别", trigger: "blur" }],
            good_type_id: [{ required: true, message: "请选择品类", trigger: "blur" }],
          },
          formHandle: [
            {
              label: "确认",
              type: "primary",
              icon: "el-icon-circle-plus-outline",
              handle: e => this.elFormSubmit(),
            },
            {
              label: "取消",
              icon: "el-icon-circle-close",
              handle: e => this.elFormVisible(),
            },
          ],
          width:500,
          height:500,
          contentHeight:500,
      }
    },
    mounted() {
      let  element = document.querySelector('.box-card');
      this.width=element.offsetWidth
      this.height=element.offsetHeight
      let  topEl = document.querySelector('.boxcard');

      this.contentHeight=element.offsetHeight-topEl.offsetHeight
        
      // },
      // console.log(el);
      // window.addEventListener('resize', this.handleResize);
      // const element = this.$refs['box-card'];
      // console.log(element);
      // element.addEventListener('resize', () => {
      //   this.handleResize();
      // });
      this.$http.post('/getSupplierType').then(res=>{
          this.supplierType=res.data
          let index=this.formCols.findIndex((res,index)=>{
            return res.prop=='type_id'
          })
          this.formCols[index].options=res.data.type
          let index2=this.formCols.findIndex((res,index)=>{
            return res.prop=='good_type_id'
          })
          this.formCols[index2].options=res.data.good
      })
        this.init()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize);
    },

    methods: {
      handleResize() {
      // 这里可以访问 this.$el 来获取元素的类
      const elementClass = this.$el.boxcard;
      console.log('页面大小变化，当前类名:', elementClass);
      // 根据需要执行其他逻辑
    },
      init(param={}) {
      //   this.load=true;listSupplier
        let data=Object.assign(this.pagination,param)
        this.$http.get('/listSupplier',data).then(res=>{
          this.pagination.page=res.data.page
          this.pagination.size=res.data.size
          this.pagination.total=res.data.total
          this.tableData=res.data.list;
          console.log(this.tableData);
        })
      },
    seach(){
      this.init(this.searchData)
    },
    elFormVisible(title){
      if (title==undefined) {
        this.title='新增'
        this.formData = { ...{status:1} };
      }
      this.$refs.elForm.dialogFormTitle=this.title
      this.$refs.elForm.dialogFormVisible =!this.$refs.elForm.dialogFormVisible
    },
    elFormChange(e){
      this.title='修改'
      this.formData={...e}
      this.elFormVisible("修改");
      
    },
    elFormDelete(e){
      this.$confirm('您确定要删除吗？','提示').then(()=>{
        this.$http.post('/delSupplier',{id:e.id}).then(res=>{
          if (res.code == 200) {
            this.$msg.success('删除成功！')
            this.tableData=this.tableData.filter((obj)=>{
              return obj.id!=e.id
            })
          }
        })
      }).catch(()=>{})
      // this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.$message.success('删除成功!');
      //   // 执行删除操作的代码
      // }).catch(() => {
      //   this.$message.info('已取消删除');
      // });
    },
    elFormSubmit(e) {
      this.$refs.elForm.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(this.formData);
          this.$http.post('/saveSupplier', this.formData).then((res) => {
            console.log(res);
            this.$message({
              type: "success",
              message: `${this.title}成功！`,
              duration: 1300,
              onClose: (res) => {
                this.elFormVisible();
                this.init();
              },
            });
          });
					// this.treeUpload()
        }
      });
    },
  
    
  },
};
</script>