<template>
  <div class="good-share">
    <div class="left">
      <div class="title">项目信息</div>
      <ul class="clear">
        <li>总预算：</li>
        <li>20000元</li>
        <li>要求到货日期：</li>
        <li>2022-88-88</li>
        <li>业务员：</li>
        <li>张三</li>
        <li>购买方：</li>
        <li>
          XXXXX公司公司公司公司公司公司公司公司公司公司公司公司公司公司公司公司公司
        </li>

        <li>项目名称：</li>
        <li>111公司公司公司公司公司公司公司公司公司</li>

        <li>项目用途：</li>
        <li>
          项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途项目用途
        </li>
      </ul>
    </div>
    <div class="right">
      <div class="title">方案选择：</div>
      <div class="table-main clear">
        <div class="table-main-index">方案1</div>
        <div class="table-main-last">
          <el-table :data="tableData" border :size="'mini'" style="width: 100%">
            <el-table-column label="序号" width="120">
              <template slot-scope="scope">
                <el-radio
                  v-model="radio"
                  @change="radio_change($event, 1)"
                  :label="scope.$index + 1"
                  :name="`&nbsp;`"
                  >&nbsp;</el-radio
                >
              </template>
            </el-table-column>
            <el-table-column property="date" label="商品名称" width="145" />
            <el-table-column property="name" label="图片" width="120">
            </el-table-column>
            <el-table-column
              property="address"
              show-overflow-tooltip
              label="分类"
            />
            <el-table-column
              property="num"
              show-overflow-tooltip
              label="购买数量"
            />
            <el-table-column
              property="price"
              show-overflow-tooltip
              label="预算单价"
            />
          </el-table>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="table-main clear">
        <div class="table-main-index" style="padding-top: 40px">
          已选中的方案
        </div>
        <div class="table-main-last">
          <el-table
            :data="tableData"
            border
            :size="'mini'"
            style="width: 100%"
           
          >
            <el-table-column
              label="方案1商品名称"
              property="date"
              width="150"
            />
            <el-table-column property="name" label="图片" width="120">
            </el-table-column>
            <el-table-column
              property="address"
              label="分类"
              show-overflow-tooltip
            />
            <el-table-column
              property="num"
              label="购买数量"
              show-overflow-tooltip
            />
            <el-table-column
              property="price"
              label="预算单价"
              show-overflow-tooltip
            />
          </el-table>
          <div>当前方案总金额：974032元</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import asyncRequest from "@/apis/service/user";
import resToken from "@/mixins/resToken";
export default {
  name: "goodShare",
  mixins: [resToken],
  data() {
    return {
      currentRow: null,
      loading: false,
      radio: "",
      multipleSelection: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          price: "52013.14",
          num: "99",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          price: "52013.14",
          num: "99",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          price: "52013.14",
          num: "99",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          price: "52013.14",
          num: "99",
        },
      ],
      loginForm: {
        username: "17744520491",
        password: "123asd",
      },
      loginRules: {
        // username: [
        //   { required: true, trigger: "blur", validator: validateUsername },
        // ],
        // password: [
        //   { required: true, trigger: "blur", validator: validatePassword },
        // ],
      },
    };
  },

  mounted() {},
  methods: {
    radio_change(e, type) {
      console.log(e);
      console.log(type);
    },

  
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>

<style lang="scss" scoped>
.good-share {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1200px;
  min-height: 100%;
  background: #f2f2f2;
  box-sizing: border-box;
  padding: 16px;
  .left {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    width: 240px;
    min-height: calc(100% - 32px);
    height: calc(100% - 32px);
    background: #fff;

    .title {
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      font-weight: bold;
      box-sizing: border-box;
      color: #565656;
      padding: 0 16px;
      border-bottom: 1px solid #f2f2f2;
    }
    ul {
      padding: 16px;
      box-sizing: border-box;
      li {
        line-height: 32px;
        font-size: 14px;

        &:nth-child(2n + 1) {
          text-align: left;
          float: left;
        }
        &:nth-child(2n + 2) {
          width: 100%;
          text-align: right;
        }
      }
    }
  }
  .right {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    background: #fff;
    width: calc(100% - 288px);
    min-height: calc(55% - 32px);
    height: calc(55% - 32px);
    box-sizing: border-box;
    // padding: 16px;

    .title {
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      font-weight: bold;
      box-sizing: border-box;
      color: #565656;
      padding: 0 16px;
      border-bottom: 1px solid #f2f2f2;
    }
    .table-main {
      // padding: 16px;
      width: 100%;
      box-sizing: border-box;
      .table-main-index {
        float: left;
        width: 45px;
        padding: 16px;
        text-align: center;
      }
      .table-main-last {
        float: left;
        width: calc(100% - 45px);
        padding: 16px;
        border-left: 1px solid #f2f2f2;
      }
      &:last-child {
        border-bottom: 1px solid #f2f2f2;
        // .table-main-index {

        // }
        // .table-main-last {
        //   border-bottom: 1px solid #f2f2f2;
        // }
      }
    }
  }
  .bottom {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 1;
    background: #fff;
    width: calc(100% - 288px);
    min-height: calc(45% - 16px);
    height: calc(45% - 16px);
    box-sizing: border-box;
    // padding: 16px;
    .table-main {
      // padding: 16px;
      width: 100%;
      box-sizing: border-box;
      .table-main-index {
        float: left;
        width: 45px;
        padding: 16px;
        text-align: center;
      }
      .table-main-last {
        float: left;
        width: calc(100% - 45px);
        padding: 16px;
        border-left: 1px solid #f2f2f2;
      }
      // &:last-child {
      //   border-bottom: 1px solid #f2f2f2;
      // .table-main-index {

      // }
      // .table-main-last {
      //   border-bottom: 1px solid #f2f2f2;
      // }
      // }
    }
  }
}
</style>
