<template>
  <el-dialog
    :title="modalTitle"
    :visible.sync="modalVisible" :width="formLabelWidth" top="2vh" @close="handleCancel">
    <div class="mobile">
        <el-form label-width="90px" :model="form" ref="from" class="from">
          <el-form-item label="碳汇量:" prop="carbonVal">
            <el-input type="text" v-model="form.carbonVal" :disabled="limit.isRead"></el-input>
          </el-form-item>
          <el-form-item label="认购期:" prop="goodsSaleDate">
             <el-date-picker
                v-model="form.goodsSaleDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                :disabled="limit.isRead"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="销售方式">
            <el-radio-group v-model="form.saleType" :disabled="limit.isRead">
              <el-radio v-for="(item,index) in saleTypeList" :label="item.val">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="销售价格:" prop="price">
            <el-input type="number" v-model="form.price" :disabled="limit.isRead"></el-input>
          </el-form-item>
          <el-form-item label="商品用途:" prop="goodsUse">
           <el-checkbox-group v-model="form.goodsUse" :disabled="limit.isRead">
               <el-checkbox
                  v-for="(item,index) in goodsUseList"
                  :label="item.val">{{item.lable}}</el-checkbox>
           </el-checkbox-group>
          </el-form-item>
          <el-form-item label="销售对象:" prop="saleTargets">
            <el-checkbox-group v-model="form.saleTargets" :disabled="limit.isRead">
                <el-checkbox
                   v-for="(item,index) in saleTargetsList"
                   :label="item.val">{{item.lable}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <el-table
            :data="productList"
            height="350"
            border
            style="width: 100%">
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column prop="productCode" label="产品编码" align="center"></el-table-column>
            <el-table-column prop="productName" label="产品名称" align="center"></el-table-column>
            <el-table-column label="帮扶区域" align="center"  width="160">
              <template slot-scope="scope">
                {{scope.row.povertyArea.areaAddress}}
              </template>
            </el-table-column>
            <el-table-column label="帮扶主体" align="center"  width="160">
              <template slot-scope="scope">
                {{scope.row.productBelongs[0].farmerInfo.farmerName}}
              </template>
            </el-table-column>
            <el-table-column prop="carbonSink" label="碳汇量" align="center"></el-table-column>
            <el-table-column prop="modifiedTime" label="创建时间" align="center"></el-table-column>
          </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="submit" v-if="!limit.isRead">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Listproduct } from "@/api/productManage/commodity";
export default {
  name: 'addMobiel',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'title'
    },
    selectRow: {
      type: Object,
      default:null
    },
    action: {
      type: String,
      default: 'add'
    }
  },
  watch: {
    visible(newVal, oldVal) {
      this.modalVisible = newVal;
    },
    title(newVal, oldVal) {
      this.modalTitle = newVal;
    },
    action(newVal, oldVal) {
      console.log(newVal)
      this.modalAction = newVal;
    },
    selectRow(newVal, oldVal) {
      this.modalSelectRow = newVal;
    }
  },
  data() {
    return {
      modalTitle: this.title,
      modalVisible: this.visible,
      modalSelectRow: this.selectRow,
      modalAction:this.action,
      formLabelWidth: '1024px',
      //窗口权限
      limit: {
        isRead: false, //是否只读
        isAdd: false //是否可写
      },
      //验证
      // rules: {
      //   carbonVal: [{ required: true, message: '碳汇量不能为空!', trigger: 'blur' }],
      //   goodsSaleDate: [{ required: true, message: '认购期不能为空!', trigger: 'blur' }],
      //   price: [{ required: true, message: '销售价格不能为空!', trigger: 'blur' }],
      //   goodsUse: [{ required: true, message: '商品用途不能为空!', trigger: 'blur' }],
      //   saleTargets: [{ required: true, message: '销售对象不能为空!', trigger: 'blur' }]
      // },
      //销售方式
      saleTypeList:[
        {
          label:"按整体销售",
          val:'1'
        },
        {
          label:"按公斤销售",
          val:'2'
        }
      ],
      //商品用途
      goodsUseList:[
        {
          lable:'履约',
          val:'1'
        },
        {
          lable:'中和',
          val:'2'
        },
        {
          lable:'普惠',
          val:'3'
        }
      ],
      //销售对象
      saleTargetsList:[
        {
          lable:'自然人',
          val:'1'
        },
        {
          lable:'履约企业',
          val:'2'
        },
        {
          lable:'认证企业',
          val:'3'
        }
      ],
      productList:[],
      //表单
      form: {}
    };
  },
  created() {
    switch (this.modalAction) {
      case 'add':
        this.limit.isAdd = true;
        break;
      case 'edit':
        this.limit.isAdd = true;
        break;
      case 'view':
        this.limit.isRead = true;
        let datas = Object.assign({},this.modalSelectRow)
        this.form = datas
        this.form.goodsUse = datas.goodsUse.split(';')
        this.form.saleTargets = datas.saleTargets.split(';')
        this.getProductList(this.form.guid)
        break;
      default:
        break;
    }
  },
  methods: {
    getProductList(id){
      Listproduct(id).then(res => {
          if(res.retHead.errCode == 0){
            this.productList = res.retBody
          }
        }
      );
    },
    //窗口关闭
    handleCancel() {
      this.$emit('closeModal', false);
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
