<template>
  <div style="padding:0 20px;">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="福利包" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <div slot="content"></div>
        <slot>
          <div>
            <Input style="width: 200px; margin-right: 10px" placeholder="关键字搜索" />
            <Button type="primary">查询</Button>
            <Button type="primary" style="margin-left: 10px">新增</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :list="list" :table-item="table">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="310" header-align="center">
          <template slot-scope="scope">
            <Button icon="ios-basket" type="primary" style="margin-left: 10px;" size="small" @click="isShowCombine = true">产品组合</Button>
            <Button icon="ios-trash-outline" type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
            <el-switch
              style="margin-left: 10px;"
              :value="scope.row.state_name == '已上架' ? true : false"
              active-color="#BF617C"
              inactive-color="#E5E5E5"
              :active-text="scope.row.state_name == '已上架' ? '已上架' : '已下架'"
              @change="stateChange(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <div style="display: flex;justify-content: flex-end;">
      <Page :total="5" show-elevator />
    </div>

    <productCombine :is-show.sync="isShowCombine"></productCombine>
  </div>
</template>

<script>
import productCombine from './components/productCombine'
export default {
  components:{
    productCombine
  },
  data() {
    return {
      isShowCombine:false,
      list:JSON.parse('{"total":2,"rows":[{"id":6,"name":"\u5b9d\u5b9d\u6811\u4e13\u4eab\u5927\u793c\u5305","price":"0.01","content":"\u5b9e\u7269\u793c\u54c1\uff0c\u4ea7\u5eb7\u4fee\u590d\uff0c\u8d85\u503c\u6444\u5f71\uff0c\u6e38\u6cf3\u6d17\u6fa1\uff0c\u65e9\u6559\u53ca\u533b\u9662\u914d\u5957\u4e00\u6761\u9f99\u670d\u52a1\u5957\u9910","state":"inactive","created_at":"2021-09-06T07:22:17.000000Z","updated_at":"2021-12-09T11:35:53.000000Z","deleted_at":null,"poster":"\\/ueditor\\/php\\/upload\\/image\\/20210910\\/1631241849267383.jpg","phone":"123456789","wechat":"987654321","items_count":6,"poster_url":"https:\\/\\/yunyubang2021.langye.net\\/ueditor\\/php\\/upload\\/image\\/20210910\\/1631241849267383.jpg","state_name":"\u5df2\u4e0b\u67b6","items":[{"id":14,"package_id":6,"product_type_id":26,"product_id":null,"original_price":null,"price":null,"commission":null,"sharing":null,"created_at":"2021-09-06T02:50:04.000000Z","updated_at":"2021-09-06T11:12:21.000000Z","deleted_at":null,"unit":"\u4e2a","num":2},{"id":15,"package_id":6,"product_type_id":8,"product_id":null,"original_price":null,"price":null,"commission":null,"sharing":null,"created_at":"2021-09-07T03:12:21.000000Z","updated_at":"2021-09-07T03:12:21.000000Z","deleted_at":null,"unit":null,"num":null},{"id":16,"package_id":6,"product_type_id":1,"product_id":null,"original_price":null,"price":null,"commission":null,"sharing":null,"created_at":"2021-09-07T03:12:21.000000Z","updated_at":"2021-09-07T03:12:21.000000Z","deleted_at":null,"unit":null,"num":null},{"id":17,"package_id":6,"product_type_id":17,"product_id":null,"original_price":null,"price":null,"commission":null,"sharing":null,"created_at":"2021-09-07T03:12:21.000000Z","updated_at":"2021-09-07T03:12:21.000000Z","deleted_at":null,"unit":null,"num":null},{"id":18,"package_id":6,"product_type_id":27,"product_id":null,"original_price":null,"price":null,"commission":null,"sharing":null,"created_at":"2021-09-07T03:12:21.000000Z","updated_at":"2021-09-07T03:12:21.000000Z","deleted_at":null,"unit":null,"num":null},{"id":19,"package_id":6,"product_type_id":25,"product_id":null,"original_price":null,"price":null,"commission":null,"sharing":null,"created_at":"2021-09-07T03:12:21.000000Z","updated_at":"2021-09-07T03:12:21.000000Z","deleted_at":null,"unit":null,"num":null}]},{"id":8,"name":"\u5582\u7231\u4e50\u5b55\u4e4b\u5b55\u5987\u7167","price":"0.00","content":"<section class=\\"_135editor\\" data-role=\\"paragraph\\"><section class=\\"_135editor\\" data-tools=\\"135\u7f16\u8f91\u5668\\" data-id=\\"88402\\"><section style=\\"padding: 2px 15px; border-top-color: rgb(160, 160, 160); border-bottom-color: rgb(160, 160, 160); border-top-width: 0.1em; border-bottom-width: 0.1em; border-top-style: solid; border-bottom-style: solid;\\"><section class=\\"_135editor\\" data-tools=\\"135\u7f16\u8f91\u5668\\" data-id=\\"98155\\"><section style=\\"margin: 10px auto; text-align: center;\\"><section class=\\"assistant\\" style=\\"margin: 0px auto; width: 120px; box-sizing: border-box;\\"><img title=\\"1638414377678859.png\\" alt=\\"image.png\\" src=\\"\\/ueditor\\/php\\/upload\\/image\\/20211202\\/1638414377678859.png\\"\\/><br\\/><\\/section><\\/section><\\/section><\\/section><\\/section><p style=\\"margin: 5px 0px; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 16px; vertical-align: inherit;\\"><span style=\\"font-family: \u5fae\u8f6f\u96c5\u9ed1,;\\" microsoft=\\"\\"><\\/span><\\/p><section class=\\"_135editor\\" data-tools=\\"135\u7f16\u8f91\u5668\\" data-id=\\"98143\\"><section style=\\"margin: 10px auto;\\"><section style=\\"padding: 0px 15px 0px 0px; color: rgb(250, 108, 133); background-color: rgb(252, 222, 224);\\"><section style=\\"background-position: right bottom; color: rgb(250, 108, 133); background-image: none;\\" editor_styles=\\"\\" images=\\"\\" files=\\"\\" bdn.135editor.com=\\"\\"><section class=\\"135brush\\" style=\\"padding: 15px 0px 15px 15px; text-align: justify; line-height: 1.75em; letter-spacing: 1.5px; font-size: 14px;\\" data-autoskip=\\"1\\"><p style=\\"vertical-align: inherit;\\">\u201c\u516c\u76ca\u670d\u52a1\uff0c\u5feb\u4e50\u5b55\u80b2\u201d\u7684\u5582\u7231\u4e50\u5b55\u9879\u76ee\u662f\u4f18\u5b55\u8bfe\u5802\u643a\u624b\u82cf\u5dde\u5e02\u513f\u7ae5\u5c11\u5e74\u57fa\u91d1\u4f1a\u4e3a\u82cf\u5dde\u672c\u5730\u5b55\u5988\u4eec\u521b\u7acb\u516c\u76ca\u5b55\u80b2\u9879\u76ee\u3002<\\/p><p style=\\"vertical-align: inherit;\\">\u9879\u76ee\u5305\u542b\u514d\u8d39\u62cd\u6444\u5b55\u5987\u7167\u548c\u514d\u8d39\u4e0a\u95e8\u6bcd\u4e73\u6307\u5bfc\u4e24\u9879\uff0c\u65e8\u5728\u4e3a\u5b55\u5988\u4eec\u7559\u4e0b\u7f8e\u597d\u65f6\u5149\u8bb0\u5fc6\uff0c\u4e3a\u65b0\u624b\u5b9d\u5988\u4eec\u89e3\u51b3\u6bcd\u4e73\u5582\u517b\u95ee\u9898\uff0c\u4e3a\u5b9d\u5b9d\u4eec\u5b88\u4f4f\u53e3\u7cae\u3002<\\/p><\\/section><\\/section><\\/section><\\/section><\\/section><p style=\\"margin: 5px 0px; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 16px; vertical-align: inherit;\\"><span style=\\"font-family: \u5fae\u8f6f\u96c5\u9ed1,;\\" microsoft=\\"\\"><\\/span><\\/p><p style=\\"margin: 5px 0px; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 16px; vertical-align: inherit;\\"><span style=\\"font-family: \u5fae\u8f6f\u96c5\u9ed1,;\\" microsoft=\\"\\"><\\/span><\\/p><section class=\\"_135editor\\" data-tools=\\"135\u7f16\u8f91\u5668\\" data-id=\\"98156\\"><section style=\\"margin: 10px auto; text-align: center;\\"><section class=\\"assistant\\" style=\\"margin: 0px auto; width: 120px; box-sizing: border-box;\\"><\\/section><\\/section><\\/section><p style=\\"margin: 5px 0px; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 16px; vertical-align: inherit;\\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\\/p><section class=\\"_135editor\\" data-tools=\\"135\u7f16\u8f91\u5668\\" data-id=\\"98143\\"><section style=\\"margin: 10px auto;\\"><section style=\\"padding: 0px 15px 0px 0px; color: rgb(250, 108, 133); background-color: rgb(252, 222, 224);\\"><section style=\\"background-position: right bottom; color: rgb(250, 108, 133); background-image: none;\\" editor_styles=\\"\\" images=\\"\\" files=\\"\\" bdn.135editor.com=\\"\\"><section class=\\"135brush\\" style=\\"padding: 15px 0px 15px 15px; text-align: justify; line-height: 1.75em; letter-spacing: 1.5px; font-size: 14px;\\" data-autoskip=\\"1\\">\u672c\u6b21\u63a8\u51fa\u7684\u662f\u5582\u7231\u4e50\u5b55\u7684\u6444\u5f71\u7bc7--\u5b55\u5987\u7167\uff0c\u643a\u624b\u82cf\u5dde\u672c\u5730\u5341\u51e0\u5e74\u7684\u54c1\u724c\u8001\u5e97--\u4f0a\u7d22\u548c2008\u5e74\u5c31\u5728\u4e0a\u6d77\u6ee9\u8d77\u6b65\u7684\u8001\u54c1\u724c--\u5e78\u5b55\u7eaa\u3002&nbsp;<\\/section><\\/section><\\/section><\\/section><\\/section><p style=\\"margin: 5px 0px; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 16px; vertical-align: inherit;\\">&nbsp;<\\/p><p style=\\"margin: 5px 0px; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 16px; vertical-align: inherit;\\"><img title=\\"1638414124160228.jpg\\" alt=\\"\u5fae\u4fe1\u56fe\u7247_20211130102509.jpg\\" src=\\"\\/ueditor\\/php\\/upload\\/image\\/20211202\\/1638414124160228.jpg\\"\\/><img title=\\"1638414152789436.png\\" alt=\\"\u5957\u7cfb.png\\" src=\\"\\/ueditor\\/php\\/upload\\/image\\/20211202\\/1638414152789436.png\\"\\/><\\/p><p style=\\"margin: 5px 0px; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 16px; vertical-align: inherit;\\">&nbsp;<\\/p><section class=\\"_135editor\\" style=\\"white-space: normal;\\" data-tools=\\"135\u7f16\u8f91\u5668\\" data-id=\\"98156\\"><section style=\\"margin: 10px auto; text-align: center;\\"><section class=\\"assistant\\" style=\\"margin: 0px auto; width: 120px; box-sizing: border-box;\\"><\\/section><\\/section><\\/section><p style=\\"vertical-align: inherit; white-space: normal;\\"><span microsoft=\\"\\"><\\/span><\\/p><section class=\\"_135editor\\" data-tools=\\"135\u7f16\u8f91\u5668\\" data-id=\\"98141\\"><section style=\\"margin: 10px auto; width: 100%; box-sizing: border-box;\\" data-width=\\"100%\\"><section style=\\"border-bottom-color: rgb(253, 228, 230); border-bottom-width: 10px; border-bottom-style: solid;\\"><p><span style=\\"font-size: 24px;\\"><strong>\u4f0a\u7d22\u516c\u76ca\u514d\u62cd\u53c2\u4e0e\u63d0\u9192\uff1a<\\/strong><\\/span><\\/p><p><span style=\\"font-size: 24px;\\"><strong>1\u3001\u5b55\u671f28\u5468-35\u5468\uff1b<\\/strong><\\/span><\\/p><p><span style=\\"font-size: 24px;\\"><strong>2\u3001\u5de5\u4f5c\u65e5\uff08\u9664\u5468\u4e8c\uff09\u62cd\u6444\uff1b<\\/strong><\\/span><\\/p><p><span style=\\"font-size: 24px;\\"><strong>3\u3001\u672a\u53c2\u4e0e\u8fc7\u4f53\u9a8c\u7684\u4f0a\u7d22\u65b0\u5ba2\uff1b<\\/strong><\\/span><\\/p><p><span style=\\"font-size: 24px;\\"><strong>4\u3001\u9884\u7ea62\u6b21\u672a\u62cd\u6444\u7684\u540d\u989d\u8ba9\u51fa\u3002<\\/strong><\\/span><\\/p><\\/section><\\/section><\\/section><p style=\\"margin: 5px 0px; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 16px; vertical-align: inherit;\\"><img title=\\"1639980962700267.jpg\\" alt=\\"\u6d77\u62a5\u66f4\u65b01220.jpg\\" src=\\"\\/ueditor\\/php\\/upload\\/image\\/20211220\\/1639980962700267.jpg\\"\\/><\\/p><\\/section><section class=\\"_135editor\\" data-role=\\"paragraph\\"><p style=\\"vertical-align: inherit;\\">&nbsp;<\\/p><\\/section><section class=\\"_135editor\\" data-role=\\"paragraph\\"><p style=\\"vertical-align: inherit;\\">&nbsp;<\\/p><\\/section>","state":"inactive","created_at":"2021-11-30T08:30:10.000000Z","updated_at":"2022-04-05T01:26:14.000000Z","deleted_at":null,"poster":"\\/ueditor\\/php\\/upload\\/image\\/20211130\\/1638261001324840.jpg","phone":"18550182642","wechat":"yunyubang","items_count":1,"poster_url":"https:\\/\\/yunyubang2021.langye.net\\/ueditor\\/php\\/upload\\/image\\/20211130\\/1638261001324840.jpg","state_name":"\u5df2\u4e0b\u67b6","items":[{"id":20,"package_id":8,"product_type_id":2,"product_id":null,"original_price":null,"price":null,"commission":null,"sharing":null,"created_at":"2021-12-07T20:04:25.000000Z","updated_at":"2021-12-07T20:04:25.000000Z","deleted_at":null,"unit":"\u6b21","num":1}]}]}').rows,
      table:[
        {
          prop:"name",
          label:'名称',
          width: 250
        },
        {
          prop:"items_count",
          label:'项目数量',
          width: 130
        },
        {
          prop:"price",
          label:"价格",
          width: 120,
          formatter:(cell,data,value,index)=>{
            return `${value}￥`
          }
        },
        {
          prop: 'state_name',
          label: '状态',
          width: 120,
          customFn:(row)=>{
            if(row.state_name == '已上架'){
              return <div style="color: green;text-align: center;">{row.state_name}</div>
            }else{
              return <div style="color: red;text-align: center;">{row.state_name}</div>
            }
          }
        }
      ]
    }
  },
  methods: {
    stateChange(row){
      row.state_name = row.state_name == '已上架' ? '已下架' : '已上架'
    }
  }

}
</script>

<style scoped lang="scss">
</style>
